Propriété CSS border-color

❮ Précédent Suivant ❯

La propriété CSS border-color est une propriété raccourcie pour définir la couleur des quatre côtés de la bordure d'élément: border-top-color, border-right-color, border-bottom-color, border-left-color. Chaque côté peut avoir sa propre valeur. La propriété border-color est utilisée avec la propriété border-style. Si la valeur est 0, la propriété border-color n'a aucun effet.

Cette propriété prend n'importe quelle valeur de couleurs CSS. La couleur initiale est la couleur actuelle de l'élément.

La propriété border-color peut avoir quatre valeurs. Si elle a une valeur, la couleur est appliquée à toutes les quatre bordures. Si elle a deux couleurs, la première valeur est définie pour les bordures supérieure et inférieure, la deuxième est appliquée aux bordures gauche et droite. Si elle a trois valeurs, la première est appliquée à la bordure supérieure, la deuxième aux bordures gauche et droite et la troisième à l'inférieure. Si elle a quatre valeurs, la première est appliqué à la supérieure, la deuxième à la droite, la troisième à l'inférieure et la quatrième à la gauche.

Valeur initiale	currentColor
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. Les bordures de la boîte sont animables.
Version	CSS1
Syntaxe DOM	object.style.borderStyle = "dotted double";

Syntaxe

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

Ici on a un exemple, où seulement une valeur est appliquée. Elle définit une couleur pour tous les quatres côtés.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .dotted {
        border-style: dotted;
        border-color: #1c87c9;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="dotted"> Exemple de la bordure bleu en pointillé (dotted).</div>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple, où trois valeurs sont appliquées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .solid {
        border-style: solid;
        border-color: #1c87c9 cyan yellow #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="solid"> Exemple avec la propriété border-color.</div>
  </body>
</html>

Essayez-vous-même!

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

Apprenez plus sur Couleurs HTML.

Maintenant, voyons un exemple illustré avec les valeurs hexadecimale, RGB, HSL et noms des couleur définies pour border-color .

Exemple

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

Essayez-vous-même!

Valeurs

Valeur	Description
color	Définit une couleur pour les bordures. La couleur initiale est la couleur actuelle de l'élément. On peut utiliser les noms des couleurs, les codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla(). Valeur requise.
transparent	Applique une couleur transparent à la bordure.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.