border-bottom-width

Baseline Large disponibilité

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

css

/* 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)
- Identique à 1px.
medium (intermédiaire)
- Identique à 3px.
thick (épais)
- Identique à 5px.

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,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick

Exemples

Comparer les épaisseurs de bordure inférieure

HTML

html

<div>Élément 1</div>
<div>Élément 2</div>

CSS

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

Spécification
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-width et border-width.
Les autres propriétés CSS liées à la bordure basse : border, border-bottom, border-bottom-style et border-bottom-color.

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 17 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu