border-width
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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.
Exemple interactif
border-width: thick;
border-width: 1em;
border-width: 4px 1.25em;
border-width: 2ex 1.25ex 0.5ex;
border-width: 0 4px 8px 12px;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: #000;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
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;
/* côtés haut et bas | côtés gauche et droit */
border-width: 2px 1.5em;
/* côté haut | côtés gauche et droit | côté 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(fin)medium(intermédiaire)thick(épais)
La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante :
thin ≤ medium ≤ thicket que les valeurs pour chaque mot-clé doivent être constantes pour un même document.
Définition formelle
| 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 : |
Syntaxe formelle
border-width =
<'border-top-width'>{1,4}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
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
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Compatibilité des navigateurs
Voir aussi
-
Les propriétés raccourcies liées aux bordures
-
Les propriétés liées à la largeur des bordures