border-color CSS propriété

Définition de la CSS border-color.

La propriété de Couleur de Bordure CSS border-color est un raccourci qui permet de spécifier la couleur des quatre bordures Css d'un élément (X)HTML, soit :

Exemple de syntaxe CSS border-color :

border-color : seagreen; 
border-color : #2E8B57; 
border-color : rgb(46,139,87);
border-color : #2E8B57 rgba(46,139,87,0.5) seagreen hsl(146,50%,36%);

La propriété de Couleur de Bordure border-color CSS peut prendre une à quatre valeurs de couleur séparées par un espace :

transparent : la couleur de bordure CSS est transparente.
#RGB : couleur de bordure CSS en Hexadécimale, ex. : #2E8B57.
nommée : couleur de bordure CSS en couleur prédéfinie, ex. : seagreen.
rgb(r,g,b) : couleur de bordure CSS en RGB.
r, g et b sont compris entre 0 et 255. S'ils sont en pourcentage alors spécifier l'unité "%". Ex. : rgb(46,139,87)
rgba(r,g,b,alpha) : couleur de bordure CSS en RGB avec transparence (CSS3).
"alpha" est compris entre 0 et 1. Ex. : rgba(46,139,87,0.5).
hsl(h,s%,l%) : couleur de bordure CSS en HSL (CSS3), ex. : hsl(146,50%,36%).
hsla(h,s%,l%,alpha) : couleur de bordure CSS en HSL avec transparence (CSS3).
"alpha" est compris entre 0 et 1. Ex. : hsla(146,50%,36%,0.5).
currentColor : la couleur de bordure CSS est héritée de la valeur de la couleur calculée de color (CSS3). Valeur par défaut.
inherit : la couleur de bordure CSS est héritée de la propriété de bordure CSS border-color son parent (CSS2).

Il existe aussi en cascading style sheets 2 (CSS2), la possibilité de récupérer des couleurs de l'interface navigateur (net4.7 gère cela très mal).

Exemple de code border-color CSS

Conditions d'application de la CSS border-color.

La propriété de bordure CSS border-color est applicable sur l'ensemble des balises HTML ou XHTML.

La valeur de la CSS border-color peut être mise directement dans la propriété de raccourci CSS border.

Héritage des valeurs Css de border-color.

La couleur de bordure CSS border-color n'est pas héritée.

Problème d'interprétation de border-color en Css.

La propriété de feuille de style border-color CSS ne pose aucun problème d'interprétation, sauf sur Netscape version<6 qui n'accepte qu'une valeur et sauf pour les nouvelles unités de couleurs CSS 3 (Compatibilité des formats des couleurs Web).

Conditions d'animation de border-color en CSS3.

La CSS border-color est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour border-color.

Couleur de la bordure CSS par défaut de border-color

Si aucune couleur de bordure CSS n'a été précisée alors, la couleur par défaut de chaque bordure CSS correspond à la valeur de color de l'élément.

Règle d'écriture des couleurs de bordures : border-color

Si la propriété de bordure CSS border-color est suivie d'une valeur de couleur, la couleur est appliquée à toutes les bordures Css.

Exemple d'écriture CSS de border-color avec une couleur :

.bordure-couleur{ border-color : red; }

Si la propriété de bordure CSS border-color CSS est suivie de deux valeurs de couleur, la première est la couleur des bordures Css horizontales (bordure haute, bordure basse) et la seconde celle des bordures verticales Css (bordure droite, bordure gauche).

Exemple d'écriture CSS de border-color avec deux couleurs :

.bordure-couleur{ border-color : red green; }

Si la propriété de bordure CSS border-color est suivie de trois valeurs de couleur, la première est la couleur de la bordure haute, la deuxième est pour la couleur des bordures Css horizontales (bordure gauche, bordure droite) et la troisième pour la couleur de la bordure basse.

Exemple d'écriture CSS de border-color avec trois couleurs :

.bordure-couleur{ border-color : red green #fff ; }

Si la propriété de bordure CSS border-color est suivie de quatre valeurs de couleur, alors chaque valeur correspond à une couleur de bordure Css (bordure haute, bordure droite, bordure basse, bordure gauche).

Exemple d'écriture CSS de border-color avec quatre couleurs :

.bordure-couleur{ border-color : red green #fff #000; }

Compatibilités navigateurs de la propriété border-color

Détails des versions de la CSS border-color: Propriété border-color est compatible avec CSS1 et plus.; Propriété border-color est compatible avec CSS2 et plus.

Résumé du support navigateurs de la CSS border-color: Propriété CSS border-color est compatible à partir de Chrome 1; Propriété CSS border-color est compatible à partir de Firefox 1; Propriété CSS border-color plus ou moins compatible à partir de Internet Explorer 7; Propriété CSS border-color plus ou moins compatible à partir de Opera 9; Propriété CSS border-color est compatible à partir de Safari 1

Exemples et astuces CSS pour utiliser border-color

Spécifier les couleurs des bordures Css individuellement

Vous pouvez définir individuellement chaque couleur de bordure Css en utilisant une des propriétés de bordure CSS suivante :

border-bottom-color : définie la couleur de la bordure basse CSS.
border-top-color : définie la couleur de la bordure haute CSS.
border-left-color : définie la couleur de la bordure gauche CSS.
border-right-color : définie la couleur de la bordure droite CSS.

Exemple d'écriture CSS de bordures définies individuellement :

.identifiant{
  border-bottom-color : green;
  border-top-color : #000;
  border-left-color : rgb(250,250,210);
  border-right-color : hsla(39,100%,50%,0.3);
}

Mettre une bordure Css de couleur à une image.

Allez voir la feuille de style "color".

Votre avis sur la définition border-color en CSS

Votez pour la définition CSS `border-color`

Votes: 4.7 / 5 - 20 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css border-color

Définitions CSS annexes border-color

border: La propriété de bordure CSS BORDER est un raccourci qui permet de spécifier le style de la bordure Css (pointillé, solide,...), l'épaisseur de la bord...[ border ]
border-bottom-color: La propriété de Couleur de Bordure CSS BORDER-BOTTOM-COLOR permet de spécifier la couleur de la bordure basse d'un élément (X)HTML.Exemple d'écriture ...[ border-bottom-color ]
border-left-color: La propriété de Couleur de Bordure CSS BORDER-LEFT-COLOR permet de spécifier la couleur Css de la bordure gauche d'un élément (X)HTML.Exemple d'écritu...[ border-left-color ]
border-right-color: La propriété de Couleur de Bordure CSS BORDER-RIGHT-COLOR permet de spécifier la couleur de la bordure Css droite d'un élément (X)HTML.Exemple d'écrit...[ border-right-color ]
border-top-color: La propriété de Couleur de Bordure CSS BORDER-TOP-COLOR permet de spécifier la couleur de la bordure haute d'un élément (X)HTML.Exemple d'écriture CSS...[ border-top-color ]
color: La propriété de Couleur CSS COLOR permet de spécifier la couleur d'un texte d'un élément (X)HTML.Exemple d'écriture CSS de color color : tomato; color...[ color ]