Propriété CSS border-bottom

La propriété border-bottom est une propriété raccourcie à l'aide de laquelle on peut définir la largeur, le style de ligne et la couleur de la bordure inférieure. Vous pouvez changer les places des valeurs, mais l'ordre droit est où vous définissez la largeur, le style et ensuite la couleur de la propriété border-bottom. si vous ne définissez pas le style de votre bordure, la couleur ne fonctionnera pas, car un élément doit avoir une bordure avant de changer sa couleur.

Si vous ne mentionnez pas la largeur, elle sera automatiquement de la taille moyenne. Si la couleur n'est pas mentionnée, ça va comprendre la couleur parent, et si le style n'est pas mentionné, ça ne fonctionnera pas.

Valeur initiale medium none currentColor
Appliquée à Tous les éléments.
Héritée Non.
Animable Oui. La couleur et la largeur de la propriété border-bottom sont animables.
Version CSS1
Syntaxe DOM object.style.borderBottom = "15px dotted blue";

Syntaxe

border-bottom: border-width | border-style | border-color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom: 8px groove #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure inférieure bleue (groove)</h2>
  </body>
</html>
Voyons un autre exemple, où on a ajouté une bordure inférieue aux éléments <h2>, <p> et <div> .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom: 5px dashed #1c87c9;
      }
      p {
      border-bottom: 8px double #8ebf42;
      }
      div {
      border-bottom: 10px ridge #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure inférieure bleu et pointillée (dashed).</h2>
    <p>Un paragraphe avec une double bordure inférieure.</p>
    <div>Un élément div avec une bordure inférieure grise de crête (ridge). </div>
  </body>
</html>

Valeurs

Valeur Description
border-bottom-style Définit le style de ligne de la bordure inférieure d'élément. La valeur par défaut est "none".
border-bottom-width Définit la largeur de la bordure inférieure d'élément. La valeur par défaut est "medium".
border-bottom-color Définit la couleur de la bordure inférieure d'élément. La valeur par défaut est la couleur actuelle de texte.
initial Définit la valeur par défaut.
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