documentation css border-color

Version CSS : 1 (& 2)

• S’applique à : Tous les éléments
• Valeur héritée : Non
• Valeur par défaut : celle de l’attribut color

Permet de définir la couleur de bordure d’un élément. La couleur ne peut être appliquée que si le type de bordure (border-style) ou l’épaisseur de bordure (border-width) a été défini, sans quoi la bordure est inexistante. Certains navigateurs n’interprèteront dailleurs pas les bordures si ces deux propriétés ne sont pas renseignées. Si la couleur d’une bordure n’est pas spécifiée, celle-ci prendra alors la couleur définie par l’attribut “color”.

Les couleurs peuvent être indiquées sous la forme :

• nom de couleur : black, red, blue
• valeur héxadécimal : #ffcc00
• rgb(x,x,x) : définition de la couleur en mode RVB avec des entiers de 0 à 255 : rgb(36,216,185)
• rgb(%,%,%) : définition de la couleur en mode RVB en pourcentages de 0 à 100 : rgb(53%,86%,13%)

Attribution des couleurs aux bordures de l’élément lorsque plusieurs couleurs sont définies (depuis CSS2 uniquement et donc non reconnu par les anciens navigateurs) :

• si 2 valeurs : première couleur pour les côtés haut et bas, seconde pour droite et gauche.
• si 3 valeurs : première couleur pour le côté haut, seconde pour droite et gauche, troisième pour bas.
• si 4 valeurs : les quatres couleur sont respectivement attribuées aux cotés haut droit bas et gauche.

Les couleurs de chaques côtés peuvent également être définies individuellement à l’aide des propriétés “border-bottom-color”, “border-top-color”, “border-right-color” et “border-left-color”.

Exemple de script

.bordure1 {
  border-color: #bcc2fc;
}
 
.bordure2 {
  border-color: #bcc2fc #808080;
}
 
.bordure3 {
  border-color: #bcc2fc #808080 #ffd700;
}
 
.bordure4 {
  border-color: #bcc2fc #808080 #ffd700 #9400d3;
}