border-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
Définition formelle
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 : |
Syntaxe formelle
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
Specification |
---|
CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
CSS Backgrounds and Borders Module Level 3 # border-color |
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 :
-
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
.