border-color
La propriété CSS 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.
Exemple interactif
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()> | <hwb()> | <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>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )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
Spécification | État | Commentaires |
---|---|---|
CSS Logical Properties and Values Level 1 | Brouillon de l'éditeur | Ajout du mot-clé logical . |
CSS Backgrounds and Borders Module Level 3 La définition de 'border-color' dans cette spécification. |
Candidat au statut de recommandation | Le mot-clé transparent a été retiré pour être ajouté au type <color> . |
CSS Level 2 (Revision 1) La définition de 'border-color' dans cette spécification. |
Recommendation | Cette propriété est désormais une propriété raccourcie. |
CSS Level 1 La définition de 'border-color' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter . |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie : |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Les propriétés liées à la couleur de la bordure
- Les autres propriétés raccourcies liées à la bordure :
- 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
etcolumn-rule-color
.