Propriété CSS border-color
La propriété CSS border-color est une abréviation qui applique une couleur aux quatre côtés d'un élément. Valeurs et exemples.
La propriété CSS border-color définit la couleur de la bordure d'un élément. C'est une abréviation qui permet de définir la couleur des quatre côtés en une seule déclaration, ou d'attribuer une couleur différente à chaque côté. Elle correspond aux quatre propriétés détaillées :
Cette page couvre la syntaxe, les formes de valeur de un à quatre, les formats de couleur acceptés, ainsi que les pièges qui rendent la couleur de bordure silencieusement invisible.
Quand la couleur s'affiche
border-color ne peint une bordure que s'il y a effectivement une bordure à peindre. La couleur est utilisée conjointement aux propriétés border-style et border-width. La bordure reste invisible si :
border-stylevautnoneouhidden(la valeur par défaut estnone), ouborder-widthvaut0.
Autrement dit, définir border-color seul ne produit aucun effet — un style est toujours nécessaire. La plupart des développeurs définissent les trois en même temps avec l'abréviation border.
Cette propriété accepte toute valeur de couleur CSS. La valeur par défaut est currentColor, ce qui signifie que la bordure hérite de la valeur color de l'élément, sauf si elle est remplacée explicitement.
Les formes de valeur de un à quatre
border-color suit le modèle CSS standard des abréviations de côtés : le nombre de valeurs fournies détermine les côtés auxquels elles s'appliquent :
| Valeurs | haut | droite | bas | gauche |
|---|---|---|---|---|
red | red | red | red | red |
red green | red | green | red | green |
red green blue | red | green | blue | green |
red green blue gold | red | green | blue | gold |
Un moyen simple de retenir l'ordre des quatre valeurs est « dans le sens horaire depuis le haut » : haut, droite, bas, gauche.
Résumé de la propriété
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. Les bordures de la boîte sont animables. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderColor = "red"; |
Syntaxe
Syntaxe de la propriété CSS border-color
border-color: color | transparent | initial | inherit;Exemples
Une seule couleur pour tous les côtés
Lorsqu'une seule valeur est fournie, elle définit la couleur des quatre côtés de l'élément.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.dotted {
border-style: dotted;
border-color: #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<div class="dotted">Example with blue dotted border.</div>
</body>
</html>Résultat
Une couleur différente par côté
Ici, quatre valeurs sont appliquées : la première au bord supérieur, la deuxième au bord droit, la troisième au bord inférieur et la quatrième au bord gauche.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
border-style: solid;
border-color: #1c87c9 cyan yellow #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<div class="solid">Example with border-color property.</div>
</body>
</html>Utiliser différents formats de couleur
Vous pouvez définir une couleur hexadécimale, RGB, RGBA, HSL, HSLA ou nommée comme valeur de border-color. L'exemple ci-dessous utilise un format de chaque type.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-color: lightblue;
}
.hex {
border-color: #1c87c9;
}
.rgb {
border-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Border with a named color.</p>
<p class="hex">Border with a hexadecimal value.</p>
<p class="rgb">Border with a RGB color value.</p>
<p class="hsl">Border with a HSL color value.</p>
</body>
</html>Apprenez-en plus sur les formats de couleur pris en charge par CSS dans HTML Colors.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| color | Définit une couleur pour les bordures. La couleur par défaut est la couleur actuelle de l'élément. Les noms de couleur, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Facultatif. Par défaut : currentColor. | Essayer » |
| transparent | Rend la couleur de la bordure transparente. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété de son élément parent. |