Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.
Type de valeur
Couleur {1-4}
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)
Statut du document:: CRD (document proposé pour la recommandation)

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
La direction et le sens d'écriture de ce texte s'adap­tent à la langue choisie.
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:
Schéma syntaxique de la propriété CSS border-colorSyntaxe de border-color, propriété CSS pour définir la couleur des bordures. curentcolor curentcolor transparent transparent c c {1,4} {1,4}
;
  • 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.

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.

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.

border-color :

Compatibilité.

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

Colonne 1
Compatibilité des navigateurs avec la propriété CSS border-color.
Colonne 2
Compatibilité avec l'ensemble des propriétés physiques, c'est à dire ne prenant pas en compte le sens d'écriture, comme border-top-color, border-right-color, etc.
Colonne 3
Compatibilité avec les propriétés logiques, qui prennent en compte le sens d'écriture, comme border-block-start-color ou border-inline-end-color, etc.
1
border-color
2
Physical properties
3
Logical properties
Estimation de la prise en charge en pourcentage du parc actuel.
96%
96%
90%

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.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.