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>

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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées