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é raccourcie CSS border-color définit la couleur de la bordure d'un élément.
Exemple interactif
border-color: red;
border-color: red #32a1ce;
border-color: red rgb(170 50 220 / 0.6) green;
border-color: red yellow green hsl(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">
Ceci est une boîte avec une bordure autour.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Propriétés constitutives
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
css
/* Valeurs de type <color> */
border-color: red;
/* haut et bas | gauche et droite */
border-color: red #f015ca;
/* haut | gauche et droite | bas */
border-color: red rgb(240 30 50 / 70%) green;
/* haut | droite | bas | gauche */
border-color: red yellow green blue;
/* Valeurs globales */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;
La propriété border-color peut être définie avec une, deux, trois ou quatre valeurs.
- Lorsqu'une valeur est définie, elle applique la même couleur aux quatre côtés.
- Lorsqu'il y a deux valeurs, la première couleur s'applique au haut et au bas, la seconde à la gauche et à la droite.
- Lorsqu'il y a trois valeurs, la première couleur s'applique au haut, la seconde à la gauche et à la droite, la troisième au bas.
- Lorsqu'il y a quatre valeurs, les couleurs s'appliquent au haut, à la droite, au bas et à la gauche dans cet ordre (dans le sens des aiguilles d'une montre).
Valeurs
<color>-
Définit la couleur de la bordure.
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
Utilisation complète de border-color
HTML
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>
CSS
css
#unevaleur {
border-color: red;
}
#horzvert {
border-color: gold red;
}
#hauthoribas {
border-color: red cyan gold;
}
#hdbg {
border-color: red cyan black gold;
}
/* Définir la largeur et le style pour tous les divs */
div {
border: solid 0.3em;
width: auto;
margin: 0.5em;
padding: 0.5em;
}
ul {
margin: 0;
list-style: none;
}
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 CSS 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 CSS liées à la bordure :
border-width,border-style - Le type de donnée
<color> - Les autres propriétés liées aux couleurs :
color,background-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-coloretcolumn-rule-color - Appliquer des couleurs sur des éléments HTML grâce à CSS