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

csssélecteur {
  border-color: couleur;
}

Nombre de valeurs

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

Exemple

Colorons la bordure du bloc en rouge :

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

css#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 :

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

css#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 :

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

css#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 :

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

css#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 :

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

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

Результат:

Voir aussi