Propriété border-color

La propriété border-color définit la couleur de la bordure pour tous les côtés simultanément ou séparément pour chaque côté. Les valeurs de la propriété peuvent être n'importe quelle unité de couleur. Valeur par défaut : la même couleur que celle du texte du bloc.

La propriété est une propriété raccourcie pour les propriétés suivantes : border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntaxe

sélecteur {
	border-color: couleur;
}

Nombre de valeurs

La propriété peut prendre 1, 2, 3 ou 4 valeurs, spécifiées avec un espace :

Nombre	Description
`1`	Type pour tous les côtés simultanément.
`2`	Première valeur pour le haut et le bas, seconde - pour les bordures gauche et droite.
`3`	Première valeur pour le haut, seconde - pour les bordures gauche et droite, troisième - pour le bas.
`4`	Première valeur pour la bordure supérieure, seconde - pour la droite, troisième - pour la bordure inférieure, quatrième - pour la bordure gauche.

Exemple

Colorons la bordure du bloc en rouge :

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red;
	width: 300px;
	height: 100px;
}

Exemple

Définissons une bordure rouge pour les côtés supérieur et inférieur, et bleue pour les côtés droit et gauche :

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue;
	width: 300px;
	height: 100px;
}

Exemple

Définissons une bordure rouge pour le côté supérieur, bleue pour le côté droit, verte pour le côté inférieur, noire pour le côté gauche :

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Exemple

Définissons simultanément une épaisseur, un type et une couleur de bordure différents :

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Exemple

Si la couleur de la bordure n'est pas définie dans border-color - elle sera prise depuis la propriété color :

<div id="elem"></div>

#elem {
	color: red;
	border-style: solid;
	border-width: 2px;
	width: 300px;
	height: 100px;
}

Voir aussi

la propriété border-width,
qui définit l'épaisseur de la bordure
la propriété border-style,
qui définit le type de bordure
la propriété border,
qui est la propriété raccourcie pour la bordure