Propriété CSS border-bottom-color
La propriété CSS border-bottom-color est utilisée pour spécifier la couleur de la bordure inférieure d'un élément.
Vous devez d'abord définir les border-style ou les border-bottom-style, car un élément doit posséder une border avant de pouvoir en modifier la couleur.
La couleur de la bordure inférieure peut également être définie à l'aide de la propriété raccourcie border-color.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non |
| Animable | Oui. La couleur de la bordure inférieure est animable. |
| Version | CSS1. |
| Syntaxe DOM | object.style.borderBottomColor = "blue"; |
Syntaxe
Syntaxe de la propriété CSS border-bottom-color
border-bottom-color: color | transparent | initial | inherit;Exemple de la propriété border-bottom-color :
Exemple de la propriété CSS border-bottom-color avec une valeur de couleur
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<h2> A heading with a solid blue bottom border</h2>
</body>
</html>Résultat
Exemple de la propriété border-bottom-color, où des couleurs sont ajoutées à différents éléments HTML pour montrer l'effet de couleur :
Exemple de la propriété CSS border-bottom-color avec la propriété border-style
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: groove;
border-bottom-color: #8ebf42;
border-bottom-width: 5px;
}
div {
border-style: inset;
border-bottom-color: #ccc;
border-bottom-width: 8px;
}
p {
border-style: double;
border-bottom-color: #1c87c9;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>A heading with a groove green bottom border.</h2>
<div>A div element with an inset gray bottom border.</div>
<p>A paragraph with a double blue border.</p>
</body>
</html>Exemple de la propriété border-bottom-color avec la valeur « transparent » :
Exemple de la propriété CSS border-bottom-color avec la valeur transparent
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: #666 dashed;
border-bottom-color: transparent;
padding: 8px;
}
</style>
</head>
<body>
<h2>Example of transparent border-bottom-color</h2>
<div>This is an example of a div element which has a transparent border-bottom-color.</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-bottom-color.
TIP
En savoir plus sur les couleurs HTML.
Exemple de la propriété border-bottom-color avec la valeur « color » :
Exemple de la propriété CSS border-bottom-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-bottom-color: lightblue;
}
.hex {
border-bottom-color: #1c87c9;
}
.rgb {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-bottom-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Bottom border with a named color.</p>
<p class="hex">Bottom border with a hexadecimal value.</p>
<p class="rgb">Bottom border with a RGB color value.</p>
<p class="hsl">Bottom border with a HSL color value.</p>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| color | Indique la couleur de la bordure inférieure. La couleur par défaut est celle de l'élément. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Valeur requise. | Tester » |
| transparent | Indique que la couleur de la bordure doit être transparente. La bordure inférieure occupera toujours l'espace défini par la valeur border-width. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'border-bottom-color' en CSS ?