border-color - Propriété CSS
Résumé des caractéristiques de la propriété border-color
currentcolor
| transparent
currentcolor
border-color
passe progressivement d'une valeur à une autre.Description.
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 du mode d'écriture en fonction 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.border-block-color
: couleur des bordures en tête et et pied du bloc.border-inline-color
: couleur des bordures en début et en fin des lignes.
border-top-color
border-left-color
border-right-color
border-bottom-color
Syntaxes pour border-color
.
c
est une couleur, exprimée dans n'importe laquelle des syntaxe reconnues par CSS : code hexadécimal, RGB, HSL, etc.
border-color:
;
- 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 CSS.
- 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
; border-color:inherit
; border-color:revert
; border-color:revert-layer
; border-color:unset
;La valeur initiale est :
.currentcolor
Remarque 1 : 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.
Remarque 2 : la norme ne définit pas la longueur des tirets, ni des espacements entre. De petites différences peuvent donc apparaître d'un navigateur à l'autre. En général, les navigateurs essaient de faire en sorte que les raccordements des tirets dans les angles soient symétriques.
Exemples.
Cliquez sur les exemples pour afficher le code CSS.
border-radius
est utilisé.
Ceci a de l'importance en cas de débordement.
(Le trait de bordure passe derrière cette ligne de texte)
inset
: les traits haut et gauche
sont plus foncés que ceux du bas et de droite.
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
.
Manipulation de la propriété border-color
par programme.
Le paramètre el
, qui figure dans tous les exemples ci-dessous, représente l'élément de la page sur lequel on souhaite travailler.
Modifier la valeur de border-color
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).
function setBorderColor(el) {
el.style['border-color']='blue darkblue';
// ou
el.style.borderColor='blue darkblue';
}
Lire en Javascript la valeur de border-color
.
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...).
function getBorderColor(el) {
alert(el.style['border-color']);
// ou
alert(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
de 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.
function getCalcBorderColor(el) {
alert(window.getComputedStyle(el).getPropertyValue('border-color'));
}
Modifier la valeur de la propriété border-color
avec JQuery.
function setBorderColor(el) {
$(el).css('border-color','#3240ff80');
// ou
$(el).css('borderColor','#3240ff80');
}
Lire la valeur calculée de la propriété border-color
avec JQuery.
La lecture de la propriété peut se faire avec les codes suivants.
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.
function getCalcBorderColor(el) {
alert($(el).css('border-color'));
// ou
alert($(el).css('borderColor'));
}
Simulateur.
Compatibilité.
Aucun problème de compatibilité n'est signalé. La prise en charge de border-color
est correcte sur tous les navigateurs actuels.
border-color
.
border-top-color
, border-right-color
, etc.
border-block-start-color
ou
border-inline-end-color
, etc.
border-color
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que border-color
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-color
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.