Propriété CSS border-bottom-width

La propriété border-bottom-width définit la largeur de la bordure inférieure.

Vous devez définir les propriétés border-style ou border-bottom-style avant la propriété border-bottom-width. Premièrement, vous avez besoin des bordures avant de définir leur largeur.

La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. De toute façon, ils suivent toujours à cet ordre: mince ≤ medium ≤ épais, et les valeurs sont constantes dans un seul document.

Valeur initiale	medium
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. La largeur peut être animable.
Version	CSS1
Syntaxe DOM	object.style.borderBottomWidth = "5px";

Syntaxe

border-bottom-width: medium | thin | thick | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-style: dotted;
        border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <p>Comme vous le voyez, nous avons utilisée la propriété border-bottom-width pour définir la largeur de la bordure inférieure de cet élément.</p>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple avec la largeur moyenne de la bordure inférieure.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2 {
      border-bottom-style: groove;
      border-bottom-width: medium;
      }
      div {
      border-style: groove;
      border-bottom-width: medium;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure de largeur moyenne.</h2>
    <div>Un élément div avec une une bordure inférieure moyenne.</div>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple, où vous pouvez voir la différence entre la largeur mince de 20 px de la bordure inférieure et la largeur épaisse de 20px de la bordure inférieure.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      padding: 5px;  
      border-bottom-style: ridge;
      border-bottom-width: 20px thin;
      }
      div {
      padding: 5px;  
      border-style: ridge;
      border-bottom-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure inférieure de largeur épaisse de 20 px. </h2>
    <div>Un élément div avec une bordure inférieure de largeur mince de 20 px.</div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
medium	Définit une bordure moyenne. C'est la valeur initiale.
thin	Définit une bordure mince.
thick	Définit une bordure épaisse.
length	À l'aide de cela, on peut définir l'épaisseur.
initial	Définit la propriété à sa valeur initiale.
inherit	Hérite la propriété de l'élément parent.