Propriété CSS border-bottom-color

La propriété CSS border-bottom-color est utilisée pour définir la couleur de la bordure inférieure d'un élément.

Premièrement, vous devez définir la propriété border-style ou la propriété border-bottom-style, car un élément doit avoir des bordures, avant que vous changiez la couleur.

La couleur de la bordure inférieure peut aussi être définie par la propriété raccourcie border-color.

Valeur initiale currentColor
Appliquée à Tous les éléments.
Héritée Non
Animable Oui. La couleur de border-bottom est animable.
Version CSS1.
Syntaxe DOM object.style.borderBottomColor = "blue";

Syntaxe

border-bottom-color: color | transparent | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom-style: solid;
      border-bottom-color: #1c87c9;
      border-bottom-width: 5px;
      }
    </style>
  </head>
  <body>
    <h2> Un titre avec une solide bordure inférieure bleu</h2>
  </body>
</html>

Voyons un exemple, où nous avons ajoutées les couleurs aux éléments <h2>, <p> et <div> pour afficher les effets des couleurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom-style: groove;
      border-bottom-color: #8ebf42;
      border-bottom-width: 5px;
      }
      div {
      border-style: inset;
      border-bottom-color: #ccc;
      border-bottom-width: 8px;
      }
      p { 
      border-style: double;
      border-bottom-color: #1c87c9;
      border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure inférieure verte (groove).</h2>
    <div>Un élément div avec une bordure grise (inset).</div>
    <p>Un paragraphe avec une double bordure bleu(double).</p>
  </body>
</html>

Dans cet exemple, vous pouvez utiliser la valeur transparent.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: #666 dashed;
      border-bottom-color: transparent;
      padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-bottom-color transparent</h2>
    <div>C'est un exemple d'un élément div qui a border-bottom-color transparent.</div>
  </body>
</html>

Vous pouvez définir les valeurs hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs pour la propriété border-right-color.

Apprenez plus sur Couleurs HTML.

Maintenant, voyons un exemple illustré avec les valeurs hexadecimale, RGB, HSL et noms des couleurs définies pour la propriété border-bottom-color.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      p {
      border: 5px solid #666;
      width: 60%;
      padding: 5px;
      }
      .name {  
      border-bottom-color: lightblue;
      }
      .hex {
      border-bottom-color: #1c87c9;
      }
      .rgb { 
      border-bottom-color: rgba(0,0,0,0.15);
      }
      .hsl { 
      border-bottom-color:  hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Bordure inférieure avec un couleur nommé.</p>
    <p class="hex">Bordure inférieure avec une valeur hexadecimal.</p>
    <p class="rgb">Bordure inférieure avec une valeur de couleur RGB.</p>
    <p class="hsl">Bordure inférieure avec une valeur de couleur HSL.</p>
  </body>
</html>

Valeurs

Valeur Description
color Indique la couleur de la bordure inférieure. La couleur initiale est la couleur actuelle de l'élément On peut utiliser les noms des couleurs, les codes des couleurs hexadecimaux, rgb(), rgba(), hsl(), hsla(). Valeur requise.
transparent Applique une couleur transparent à une bordure inférieure. La bordure inférieure occupera l'espace définie par la valeur border-width.
initial Définit la 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