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 (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).

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 .

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 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

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 :

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 "".

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

Votez pour la définition CSS border-color

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/border-color-css.html Votes: 4.7 / 5 - 20 votes
Cliquez sur une étoile pour voter.