Propriété CSS border-bottom-color
La propriété CSS border-bottom-color est utilisée pour définir la couleur de la bordure inférieure d'un élément.
Premièrement, vous devez définir la propriété border-style ou la propriété border-bottom-style, car un élément doit avoir des bordures, avant que vous changiez la couleur.
La couleur de la bordure inférieure peut aussi être définie par la propriété raccourcie border-color.
| Valeur initiale | currentColor |
| Appliquée à | Tous les éléments. |
| Héritée | Non |
| Animable | Oui. La couleur de border-bottom est animable. |
| Version | CSS1. |
| Syntaxe DOM | object.style.borderBottomColor = "blue"; |
Syntaxe
border-bottom-color: color | transparent | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<h2> Un titre avec une solide bordure inférieure bleu</h2>
</body>
</html>Voyons un exemple, où nous avons ajoutées les couleurs aux éléments <h2>, <p> et <div> pour afficher les effets des couleurs.
Exemple
<!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>Un titre avec une bordure inférieure verte (groove).</h2>
<div>Un élément div avec une bordure grise (inset).</div>
<p>Un paragraphe avec une double bordure bleu(double).</p>
</body>
</html>Dans cet exemple, vous pouvez utiliser la valeur transparent.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: #666 dashed;
border-bottom-color: transparent;
padding: 8px;
}
</style>
</head>
<body>
<h2>Exemple de border-bottom-color transparent</h2>
<div>C'est un exemple d'un élément div qui a border-bottom-color transparent.</div>
</body>
</html>Vous pouvez définir les valeurs hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs pour la propriété border-right-color.
Maintenant, voyons un exemple illustré avec les valeurs hexadecimale, RGB, HSL et noms des couleurs définies pour la propriété border-bottom-color.
Exemple
<!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">Bordure inférieure avec un couleur nommé.</p>
<p class="hex">Bordure inférieure avec une valeur hexadecimal.</p>
<p class="rgb">Bordure inférieure avec une valeur de couleur RGB.</p>
<p class="hsl">Bordure inférieure avec une valeur de couleur HSL.</p>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| color | Indique la couleur de la bordure inférieure. La couleur initiale est la couleur actuelle de l'élément On peut utiliser les noms des couleurs, les codes des couleurs hexadecimaux, rgb(), rgba(), hsl(), hsla(). Valeur requise. |
| transparent | Applique une couleur transparent à une bordure inférieure. La bordure inférieure occupera l'espace définie par la valeur border-width. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Pratiquez vos connaissances
