border-color
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 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
border-color: red;
border-color: red #32a1ce;
border-color: red rgba(170, 50, 220, 0.6) green;
border-color: red yellow green hsla(60, 90%, 50%, 0.8);
border-color: red yellow green transparent;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eee;
color: #000;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
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
border-color =
[ <color> | <image-1D> ]{1,4}
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
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 Module Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |
Compatibilité des navigateurs
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-coloretcolumn-rule-color.