Propriété CSS border-bottom

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.