Propriété CSS border-color
La propriété CSS border-color définit la couleur des quatre côtés de la bordure d'un élément. Elle correspond aux propriétés suivantes :
Chaque côté peut avoir sa propre valeur. La propriété border-color est utilisée avec la propriété border-style. Si la largeur de la bordure est de 0, ou si border-style est none ou hidden, la couleur de la bordure ne sera pas visible.
Cette propriété accepte n'importe quelle valeur de couleur CSS. La couleur par défaut est la couleur actuelle de l'élément.
La propriété border-color peut prendre 4 valeurs. Si elle en a une seule, la couleur s'applique aux quatre bordures. Si elle en a deux, la première valeur s'applique aux bordures supérieure et inférieure, la deuxième aux bordures droite et gauche. Si elle en a trois, la première s'applique à la bordure supérieure, la deuxième aux bordures droite et gauche, et la troisième à la bordure inférieure. Si elle en a quatre, la première s'applique à la bordure supérieure, la deuxième à la droite, la troisième à la bordure inférieure et la quatrième à la gauche.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Tous les éléments. Elle 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;Voici un exemple où une seule valeur est appliquée. Elle définit la couleur pour les quatre côtés de l'élément.
Exemple de la propriété border-color :
Exemple de la propriété CSS border-color avec une seule valeur
<!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
Voyons un autre exemple où quatre valeurs sont appliquées. La première s'applique à la bordure supérieure, la deuxième à la droite, la troisième à la bordure inférieure et la quatrième à la gauche.
Exemple de la propriété border-color avec 4 valeurs :
Exemple de la propriété CSS border-color avec 4 valeurs
<!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>Vous pouvez définir des valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou des noms de couleurs comme valeur pour la propriété border-color.
succès
Découvrez-en plus sur les couleurs HTML.
Exemple de la propriété border-color avec la valeur "color" :
Exemple de la propriété CSS border-color avec des valeurs hexadécimales, RGB, HSL et des noms de couleurs
<!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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| color | Définit une couleur pour les bordures. La couleur par défaut est la couleur actuelle de l'élément. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Facultatif. Par défaut, currentColor. | Tester » |
| transparent | Rend la couleur de la bordure transparente. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Parmi les affirmations suivantes, lesquelles sont vraies concernant la propriété 'border-color' en CSS ?