Border-color, propriété CSS

border-color

Résumé des caractéristiques de la propriété `border-color`

Description rapide

Définit la couleur des bordures.

Statut

Standard

S'applique à

Tous les éléments sauf les annotations et les bases ruby.

Utilisable sur

HTML

Valeurs prédéfinies

currentcolor | transparent

Pourcentages

Ne s'appliquent pas.

Valeur initiale

currentcolor

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété border-color passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Arrière-plans et bordures

Références (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Statut du document: CR (document candidat à la recommandation)

CSS Logical Properties and Values Level 1

Statut du document: WD (document de travail)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma de la syntaxe de `border-color`.

Schéma syntaxique de la propriété border-color.
Syntaxe détaillée

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

color-name est le nom d'une couleur : voir Nuancier.
#xxxx est le code hexadécimal d'une couleur.
color est une couleur, spécifiée avec l'une des fonctions rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().
De une à 4 couleurs peuvent être spécifiées en les séparant par un espace.

Description de la propriété `border-color`.

border-color définit la couleur des bordures d'un élément. La propriété border-color accepte de une à quatre valeurs :

Si une seule valeur est précisée, elle s'applique aux quatre côtés.
Si deux valeurs sont précisées, la première définit la couleur des bordures en haut et en bas ; la deuxième des bordures gauche et droite.
Si trois valeurs sont indiquées, la première définit la couleur de la bordure du haut, la deuxième celle des bordures droite et gauche, et la dernière la couleur de la bordure du bas.
Enfin, lorsque les quatre valeurs sont indiquées, elles correspondent respectivement à la couleur des bordures du haut, de droite, du bas et de gauche.

Il existe également des propriétés spécifiques pour chacun des bords:

border-top-color : couleur de la bordure du haut.
border-right-color : couleur de la bordure de droite.
border-bottom-color : couleur de la bordure du bas.
border-left-color : couleur de la bordure à gauche.

Pour que la couleur des bordures soit visible, pensez aussi à définir la propriété border-style.

Prise en charge de la langue.

Les propriétés dites "logiques" prennent en compte le sens et la direction d'écriture :

border-block-start-color : couleur de la bordure en tête du bloc.
border-block-end-color : couleur de la bordure de pied du bloc.
border-inline-start-color : couleur de la bordure du côté du début des lignes.
border-inline-end-color : couleur de la bordure du côté de la fin des lignes.

Enfin, deux propriétés "semi-résumées" qui permettent de définir la couleur des deux côtés opposés de l'élément.

border-block-color : couleur des bordures en tête et en pied du bloc.
border-inline-color : couleur des bordures en début et en fin des lignes.

border-top-color

border-left-color

La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.

border-right-color

border-bottom-color

Valeurs pour `border-color`.

Remarque : la couleur peut être altérée par les styles de trait avec effet 3D (inset, groove...) En effet, pour créer un effet de relief ces styles assombrissent la couleur sur certains traits ou certaines parties du trait, et éclaircissent la couleur à d'autres endroits.

border-color: currentcolor;

Valeur par défaut. La bordure est de la même couleur que le texte.
border-color: transparent;

La bordure est invisible mais son épaisseur est prise en compte.
border-color: #451498;

La bordure est dans la couleur indiquée. Toutes les notations normalisées pour définir une couleur sont acceptées (nom, code RGB...). Voir les différentes notations pour Les couleurs.
border-color: blue red;

Deux informations de couleur séparées par un espace. La première s'applique aux traits du haut et du bas. La deuxième aux traits de droite et de gauche.
border-color: blue red black;

Trois informations de couleur séparées par un espace. La première s'applique au trait du haut, la deuxième aux traits de droite et de gauche, et la dernière au trait du bas.
border-color: blue red yellow green;

Enfin, quatre informations de couleur séparées par un espace, s'appliquent à chacun des traits en tournant dans le sens des aiguilles d'une montre et en commençant par le trait du haut.
border-color: initial; (currentcolor) border-color: inherit; border-color: revert; border-color: revertLayer; border-color: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété `border-color`.

Les bordures suivent les arrondis lorsque border-radius est utilisé.

La bordure est dessinée par dessus l'arrière-plan mais en dessous du contenu.
Ceci a de l'importance en cas de débordement.

(Le trait de bordure passe derrière cette ligne de texte)

Remarque : la couleur est modifiée par le style de trait inset : les traits haut et gauche sont plus foncés que ceux du bas et de droite.

Exemple d'animation de `border-color`.

Come d'habitude, nous essayons de suggérer des idées originales pour animer les propriétés. Voici un petit effet visuel de rotation réalisé avec l'animation de la propriété border-color.

Accéder à la propriété `border-color` par programme.

Modifier la couleur de la bordure en Javascript.

Voici comment modifier avec Javascript la valeur de border-color. Le nom de la propriété peut être écrit dans la notation kebab-case (un tiret pour séparer les mots), ou dans la notation camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['border-color'] = 'blue';
	// ou
	let el = document.getElementById('id');
	el.style.borderColor = 'blue';

Lire en Javascript la couleur de la bordure.

Cet exemple de code fonctionne lorsque la propriété a été définie dans le code HTML, avec l'attribut style, et non pas en CSS via un sélecteur. La ou les couleurs sont renvoyées exactement comme elles ont été définies (nom, code hexadécimal, fonction hsl(), etc...).


	let el = document.getElementById('id');
	let value = el.style['border-color'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.borderColor;

Lire la valeur calculée de `border-color` en Javascript.

La valeur calculée est la couleur appliquée à la propriété border-color pour cet élément, une valeur éventuellement héritée, ou à défaut, la valeur currentcolor qui est la valeur initiale de cette propriété.

Dans le cas de border-color, la ou les couleurs sont retournées sous la forme rgb(r,g,b), ou rgba(r,g,b,a) si la couleur n'est pas totalement opaque.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('border-color');

Modifier la couleur des bordures avec JQuery.

Deux syntaxes possibles également.


 $('#id').css('border-color', 'blue');
 // ou
 $('#id').css('borderColor', 'blue');

Lire la valeur calculée de la propriété `border-color` avec JQuery.

La lecture de la propriété peut se faire avec le code suivant. Comme en Javascript, la couleur est retournée sous la forme rgb(r,g,b) ou rgba(r,g,b,a) si la couleur est translucide.


	let value = $('#id').css('border-color');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété border-color et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de border-color. On constate en particulier que la couleur est toujours retournée sous la forme rgb().

Exemple interactif avec la propriété `border-color`.

border-color :

currentcolor

transparent

Compatibilité des navigateurs avec `border-color`.

Aucun problème de compatibilité n'est signalé. La prise en charge de border-color est correcte sur tous les navigateurs actuels.

Colonne 1

Support de la propriété border-color qui définit la couleur des bordures.

Colonne 2

Support de la propriété border-top-color, border-right-color, border-bottom-color et border-left-color (propriétés physiques).

Colonne 3

Support des propriétés border-block-color, border-inline-color, etc. (propriétés logiques).

Propriété
border-color

Propriétés
physiques

Propirétés
logiques

Estimation de la prise en charge globale.

96%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `border-color`.

La propriété résumée border-color et les propriétés détaillées correspondantes n'ont pas évolué au fil des version du langage CSS, mais la spécification des couleurs a beaucoup changé : voir notre page sur Les couleurs.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Définition initiale de la propriété résumée border-color et des propriétés détaillées correspondantes.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Pas de changement sur les propriétés définissant la couleur des bordures, si ce n'est qu'elles acceptent la valeur inherit.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Propriétés et valeurs logiques - Niveau 1

Introduction des propriétés logiques (prenant en charge le mode d'écriture en fonction de la langue).

18 Mai 2017
Document de travail.
Module CSS - Arrière-plans et bordures - Niveau 3

Pas de changement concernant directement les propriétés définissant la couleur des bordures, mais de nombreuses évolutions concernant les couleurs elles-mêmes (voir notre page sur les couleurs).

02 Août 2002
Document de travail.
17 Décembre 2009
Candidat à la recommandation.

Voir aussi, au sujet des bordures.

La spécification du W3C "CSS Backgrounds and Borders Module" regroupe tout ce qui concerne les bordures et les arrière-plans, ce qui représente pas mal de choses. Pour faciliter vos recherches, nous listons ci-dessous les principaux termes en rapport.