Border-color, propriété CSS
Cette page concerne aussi les propriété(s) physique(s) :
border-top-colorborder-right-colorborder-bottom-colorborder-left-colorEt les propriétés logiques :
border-block-colorborder-block-start-colorborder-block-end-colorborder-inline-colorborder-inline-start-colorborder-inline-end-colorRésumé des caractéristiques de la propriété border-color
currentcolor | transparentcurrentcolorborder-color passe progressivement d'une valeur à une autre.Schéma de la syntaxe de border-color.
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-nameest le nom d'une couleur : voir Nuancier.#xxxxest le code hexadécimal d'une couleur.colorest une couleur, spécifiée avec l'une des fonctionsrgb()ourgba(),hsl()ouhsla(),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-colorborder-left-colorborder-right-colorborder-bottom-colorValeurs 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.
border-radius est utilisé.
Ceci a de l'importance en cas de débordement.
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.
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.
border-color qui définit la couleur des bordures.border-top-color, border-right-color, border-bottom-color et border-left-color (propriétés physiques).border-block-color, border-inline-color, etc. (propriétés logiques).border-colorphysiques
logiques
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
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
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantborder-color. Définition initiale de la propriété résuméeborder-coloret des propriétés détaillées correspondantes.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantborder-color. Pas de changement sur les propriétés définissant la couleur des bordures, si ce n'est qu'elles acceptent la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Propriétés et valeurs logiques - Niveau 1
Concernantborder-color. Introduction des propriétés logiques (prenant en charge le mode d'écriture en fonction de la langue).18 Mai 2017Document de travail.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Concernantborder-color. 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 2002Document de travail.17 Décembre 2009Candidat à la recommandation.
Voir aussi, au sujet des bordures.
La spécification du W3C "module CSS - Arrière-plans et bordures" 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.