Attribut border-color CSS

Définition et utilisation

L'attribut border-color définit la couleur des quatre bords. Cet attribut peut définir de 1 à 4 couleurs.

L'attribut border-color est une propriété abrégée qui permet de définir la couleur visible de tous les bords d'un élément, ou de définir des couleurs différentes pour chacun des quatre côtés. Voir l'exemple suivant :

Exemple 1

border-color:red green blue pink;
  • Le bord supérieur est rouge
  • La bordure de droite est verte
  • Le bord inférieur est bleu
  • Le bord gauche est rose

Exemple 2

border-color:red green blue;
  • Le bord supérieur est rouge
  • Le bord droit et le bord gauche sont verts
  • Le bord inférieur est bleu

Exemple 3

border-color:dotted red green;
  • Le bord supérieur et le bord inférieur sont rouges
  • Le bord droit et le bord gauche sont verts

Exemple 4

border-color:red;
  • Les 4 bords sont tous rouges

N'oubliez pas que le style de bord ne peut pas être none ou hidden, sinon la bordure ne sera pas visible.

Remarque :Il est toujours préférable de déclarer l'attribut border-style avant border-color. L'élément doit obtenir la bordure avant de changer sa couleur.

Veuillez également consulter :

Tutoriel CSS :Bordure CSS

Manuel de référence HTML DOM :Attribut borderColor

Exemple

Définir la couleur des 4 bords :

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Essayez-le vous-même

Syntaxe CSS

border-color: color|transparent|initial|inherit;

Valeur de l'attribut

Valeur Description
color_name Définit la couleur de bord en utilisant le nom de couleur (par exemple red).
hex_number Définit la couleur de bord en utilisant une valeur hexadécimale (par exemple #ff0000).
rgb_number Définit la couleur de bord en utilisant le code rgb (par exemple rgb(255,0,0)).
transparent Valeur par défaut. La couleur de bord est transparente.
inherit Définit que la couleur de bord doit être héritée de l'élément parent.

Détails techniques

Valeur par défaut : non spécifié
Héritabilité : non
Version : CSS1
Syntaxe JavaScript : object.style.borderColor="#FF0000 blue"

Autres exemples

Définir la couleur des quatre bords
Cet exemple montre comment définir la couleur des quatre bords. Vous pouvez définir une à quatre couleurs.

Support du navigateur

Les numéros dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Remarque :Internet Explorer 6 (et les versions antérieures) ne prend pas en charge la valeur de l'attribut "transparent".

Remarque :Les navigateurs IE7 et antérieurs ne prennent pas en charge la valeur "inherit". IE8 nécessite !DOCTYPE. IE9 prend en charge "inherit".