La propriété CSS border-width
est une propriété raccourcie qui définit la largeur de la bordure d'un élément.
Cette propriété raccourcie définit les propriétés détaillées
Si on utilise les propriétés logiques, elle définit border-block-start-width
, border-block-end-width
, border-inline-start-width
et border-inline-end-width
.
Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie border
.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
/* Valeurs avec un mot-clé */
border-width: thin;
border-width: medium;
border-width: thick;
/* Une largeur pour chaque côté */
/* Valeur de type <length> */
border-width: 5px;
/* largeur verticale puis horizontale */
border-width: 2px 1.5em;
/* haut | largeur horizontale | bas */
border-width: 1px 2em 1.5cm;
/* haut | droite | bas | gauche */
border-width: 1px 2em 0 4rem;
/* Valeurs globales */
border-width: inherit;
border-width: initial;
border-width: unset;
La propriété border-width
peut être définie avec une, deux, trois ou quatre valeurs.
- Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
- Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
- Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
- Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).
Valeurs
<line-width>
- Une valeur de longueur (type
<length>
ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :thin
La bordure est fine. medium
La bordure est moyenne. thick
La bordure est épaisse. thin ≤ medium ≤ thick
et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.
Syntaxe formelle
Exemples
HTML
<p id="unevaleur">
Une valeur : la bordure fait 6px sur les 4 côtés.
</p>
<p id="deuxvaleurs">
Deux valeurs différentes : elle fait 2px en haut
et en bas et elle mesure 10px pour les bords droit
et gauche.
</p>
<p id="troisvaleurs">
Trois valeurs différentes : 0.3em pour le haut,
9px pour le bas et zéro pour la droite et la
gauche.
</p>
<p id="quatrevaleurs">
Quatre valeurs différentes : "thin" pour le haut,
"medium" pour la droite, "thick" pour le bas
et 1em pour la gauche.
</p>
CSS
#unevaleur {
border: ridge #ccc;
border-width: 6px;
}
#deuxvaleurs {
border: solid red;
border-width: 2px 10px;
}
#troisvaleurs {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#quatrevaleurs {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Backgrounds and Borders Module Level 3 La définition de 'border-width' dans cette spécification. |
Candidat au statut de recommandation | Pas de modification directe. La modification du type de données <length> impacte cette propriété. |
CSS Level 2 (Revision 1) La définition de 'border-width' dans cette spécification. |
Recommendation | Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document. |
CSS Level 1 La définition de 'border-width' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter . |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie : |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Les propriétés raccourcies liées aux bordures
- Les propriétés liées à la largeur des bordures