border-bottom-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété border-bottom-width définit l'épaisseur de la bordure pour le côté bas d'un élément.

Exemple interactif

Syntaxe

css
/* 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;

/* Valeurs globales */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;

Valeurs

<line-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 (fin)
  • medium (intermédiaire)
  • thick (épais)

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.

Définition formelle

Valeur initialemedium
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Valeur calculéela longueur absolue ou 0 si border-bottom-style vaut none ou hidden
Type d'animationune longueur

Syntaxe formelle

border-bottom-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

Exemples

CSS

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

HTML

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

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi