Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

border-bottom-width

La propriété border-bottom-width définit l'épaisseur de la bordure pour le côté bas d'une boîte.

Valeur initialemedium
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéela longueur absolue ou 0 si border-bottom-style vaut none ou hidden
Animableoui, comme une longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Une valeur de longueur */
/* Type <length>          */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/* Valeurs avec un mot-clé */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

border-bottom-width: inherit;

Valeurs

<br-width>
Une valeur de longueur (<length>) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
thin
 
Une bordure fine.
medium
 
Une bordure moyenne.
thick
 
Une bordure épaisse.
La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée thin ≤ medium ≤ thick et que ces valeurs soient constantes pour un même document.
inherit
Ce mot-clé représente la valeur calculée de border-bottom-width de l'élément parent.

Syntaxe formelle

<br-width>


<br-width> = <length> | thin | medium | thick

Exemples

CSS

.element1{
  border-bottom: thick solid red;
}
.element2{
  border-bottom: medium solid orange;
}
.element3{
  border-bottom: thin solid green;
}

HTML

<p class="element1">
  Une bordure épaisse rouge.
</p>

<p class="element2">
  Une bordure moyenne orange.
</p>

<p class="element3">
  Et une bordure fine verte.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-bottom-width' dans cette spécification.
Candidat au statut de recommandation Pas de modification significative.
CSS Level 2 (Revision 1)
La définition de 'border-bottom-width' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, teoli, FredB, Yuichiro, Mgjbot, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,