1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: border-color
slug: Web/CSS/border-color
tags:
- CSS
- Propriété
- Propriété raccourcie
- Reference
translation_of: Web/CSS/border-color
---
{{CSSRef}}
La propriété CSS **`border-color`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) 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.
{{EmbedInteractiveExample("pages/css/border-color.html")}}
Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.
## Syntaxe
```css
/* 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 {{cssxref("<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
{{csssyntax}}
## Exemples
### CSS
```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
```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
{{EmbedLiveSample('Exemples', 600, 300)}}
## Spécifications
| Spécification | État | Commentaires |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| {{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}} | {{Spec2("CSS Logical Properties")}} | Ajout du mot-clé `logical`. |
| {{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}} | {{Spec2('CSS3 Backgrounds')}} | Le mot-clé `transparent` a été retiré pour être ajouté au type {{cssxref("<color>")}}. |
| {{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}} | {{Spec2('CSS2.1')}} | Cette propriété est désormais une propriété raccourcie. |
| {{SpecName("CSS1", "#border-color", "border-color")}} | {{Spec2('CSS1')}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.border-color")}}
## Voir aussi
- Les propriétés liées à la couleur de la bordure
- {{cssxref("border")}},
- {{cssxref("border-top-color")}},
- {{cssxref("border-right-color")}},
- {{cssxref("border-bottom-color")}},
- {{cssxref("border-left-color")}},
- Les autres propriétés raccourcies liées à la bordure :
- {{cssxref("border-width")}},
- {{cssxref("border-style")}}.
- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
- Le type de données {{cssxref("<color>")}}
- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.
|
