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 :

CSS - Propriété border-color

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, border-right-color, border-bottom-color et border-left-color.

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

Syntaxes pour 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 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 black 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: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

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

Compatibilité.

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

Voir aussi...

Bordures - Propriétés.

Couleurs - Propriétés.

Couleurs - Fonctions.

  • hsl() : Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
  • hsla() : Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • hwb() : Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
  • rgb() : Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
  • rgba() : Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.