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.-
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.
border-radius est utilisé.
Ceci a de l'importance en cas de débordement.
(Le trait de bordure passe derrière cette ligne)
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.
border: Résumé des propriétés des bordures.border-collapse: Mode d'encadrement des cellules de tableau.border-image: Résumé des propriétés des bordures réalisées avec des images.border-image-outset: Débordement de l'image de bordure.border-image-repeat: Mode de répétition de l'image de bordure.border-image-slice: Définit comment l'image de bordure est découpée.border-image-source: L'image utilisée pour construire la bordure.border-image-width: La largeur de la bordure image.border-radius: Rayon des angles arrondis.border-spacing: Espacement entre les cellules adjacentes dans un tableau.border-style: Type de bordure (simple, double, pointillé...).border-width: Epaisseur de la bordure.
Couleurs - Propriétés.
background-color: Définit la couleur de l'arrière-plan.caret-color: Choisit la couleur du marqueur de texte (curseur clignotant).color: Définit la couleur de l'avant plan (texte essentiellement).column-rule-color: Définit la couleur des lignes de séparation de colonnes.outline-color: Définit la couleur de l'encadrement (outline).text-decoration-color: Définit la couleur du trait de décoration.text-emphasis-color: Définit la couleur des caractères de mise en exergue.
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.