border-bottom-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-bottom-width définit l'épaisseur de la bordure pour le côté bas d'un élément.
Exemple interactif
border-bottom-width: thick;
border-bottom-width: 2em;
border-bottom-width: 4px;
border-bottom-width: 2ex;
border-bottom-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec une bordure autour.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntaxe
/* Valeurs avec un mot-clé */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* Une valeur de type <length> */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* Valeurs globales */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: revert;
border-bottom-width: revert-layer;
border-bottom-width: unset;
Valeurs
<line-width>-
Définit l'épaisseur de la bordure, soit comme une longueur (
<length>) explicite et non négative, soit comme un mot-clé. Si c'est un mot-clé, il doit être l'une des valeurs suivantes :thin(fin)medium(intermédiaire)thick(épais)
Note :
Comme la spécification ne définit pas l'épaisseur exacte associée à chaque mot-clé, le résultat précis lors de leur utilisation dépend de l'implémentation. Néanmoins, ils suivent toujours le schéma thin ≤ medium ≤ thick, et les valeurs sont constantes dans un même document.
Définition formelle
| Valeur initiale | medium |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | la longueur absolue ou 0 si border-bottom-style vaut none ou hidden |
| Type d'animation | une longueur |
Syntaxe formelle
border-bottom-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Exemples
Comparer les épaisseurs de bordure inférieure
HTML
<div>Élément 1</div>
<div>Élément 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Compatibilité des navigateurs
Voir aussi
- Les autres propriétés CSS liées à la largeur de la bordure :
border-left-width,border-right-width,border-top-widthetborder-width. - Les autres propriétés CSS liées à la bordure basse :
border,border-bottom,border-bottom-styleetborder-bottom-color.