border-color

La propriété border-color est une propriété raccourcie qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Chaque côté peut être paramétré individuellement grâce aux propriétés border-top-color, border-right-color, border-bottom-color et border-left-color ou, si on utilise les propriétés logiques : border-block-start-color, border-block-end-color, border-inline-start-color et border-inline-end-color.

Syntaxe

/* border-color : Une valeur        */
/* Une valeur pour les quatre côtés */ 
border-color: red;

/* border-color : Deux valeurs         */
/* Première valeur : côtés horizontaux */
/* Seconde valeur : côtés verticaux    */
border-color: red #f015ca;

/* border-color : Trois valeurs        */
/* Première valeur : côté haut         */
/* Deuxième valeur : côtés verticaux */
/* Troisième valeur : côté bas         */
border-color: red yellow green;

/* border-color : Quatre valeurs  */
/* Première valeur : côté haut    */
/* Deuxième valeur : côté droit   */
/* Troisième valeur : côté bas    */
/* Quatrième valeur : côté gauche */
border-color: red yellow green blue;

/* Valeurs globales */
border-color: inherit;

Valeurs

<color>

Une valeur de type <color> qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.

inherit

Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.

Syntaxe formelle

<color>{1,4}
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
où 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

#unevaleur {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#hauthoribas {
  border-color: red cyan gold;
}

#hdbg {
  border-color: red cyan black gold;
}

/* Set width and style for all divs */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

HTML

<div id="unevaleur">
  <p><code>border-color: red;</code> équivalent à</p>
  <ul><li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> équivalent à</p>
  <ul><li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="hauthoribas">
  <p><code>border-color: red cyan gold;</code> équivalent à</p>
  <ul><li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="hdbg">
  <p><code>border-color: red cyan black gold;</code> équivalent à</p>
  <ul><li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés liées à la couleur de la bordure
  • border,
  • border-top-color,
  • border-right-color,
  • border-bottom-color,
  • border-left-color,
• Les autres propriétés raccourcies liées à la bordure :
  • border-width,
  • border-style.
• Appliquer des couleurs sur des éléments HTML grâce à CSS
• Le type de données <color>
• Les autres propriétés relatives aux couleurs : color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color et column-rule-color.