Propriété CSS border-bottom-color
La propriété CSS border-bottom-color définit la couleur de la bordure inférieure d'un élément. Exemples et démonstrations inclus.
La propriété CSS border-bottom-color définit la couleur de la bordure inférieure d'un élément uniquement. C'est l'une des quatre propriétés de couleur par côté, aux côtés de border-top-color, border-right-color et border-left-color.
Une bordure comporte trois éléments : un style, une largeur et une couleur. Une bordure est invisible tant qu'elle n'a pas de style ; border-bottom-color ne produit donc aucun effet seule. Avant (ou conjointement avec) cette propriété, vous devez déclarer un style via border-style ou border-bottom-style — sinon le style prend la valeur par défaut none et aucune bordure n'est dessinée, quelle que soit la couleur définie.
Quand l'utiliser
Utilisez border-bottom-color lorsque vous souhaitez colorier uniquement le bord inférieur sans toucher aux trois autres côtés. Cas courants :
- Titres et liens soulignés — une bordure inférieure qui change de couleur au
:hoverou au:focussans décaler la mise en page (contrairement àtext-decoration). - Barres d'onglets et états actifs — une bordure inférieure colorée indique l'onglet sélectionné.
- Recoloration d'un seul côté d'une bordure uniforme — définissez les quatre côtés avec la propriété abrégée border-color, puis remplacez la valeur inférieure avec
border-bottom-color.
La valeur par défaut est currentColor, ce qui signifie que si vous ne définissez pas de couleur, la bordure prend la couleur du texte de l'élément. La couleur de la bordure inférieure peut également être définie via la propriété abrégée border-color (troisième valeur) ou la propriété abrégée border-bottom.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Tous les éléments. |
| Héritage | Non |
| Animable | Oui. La couleur de border-bottom 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 avec des couleurs appliquées à différents éléments HTML pour illustrer 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 une valeur transparente
<!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>Notez que transparent n'est pas la même chose qu'une absence de bordure : la bordure inférieure occupe toujours l'espace défini par border-bottom-width, elle est simplement invisible. Cela est utile pour réserver de l'espace dans la mise en page que vous révélez au survol ou au focus.
Vous pouvez utiliser des valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou des noms de couleurs comme valeur pour la propriété border-bottom-color.
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>border-bottom-color accepte une seule valeur de couleur. Si vous en listez plusieurs, seule la première valeur valide est utilisée. Pour colorier les quatre côtés à la fois, utilisez plutôt la propriété abrégée border-color.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| 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. | Essayer » |
| 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. | 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. |
Propriétés associées
- border-bottom — propriété abrégée pour la largeur, le style et la couleur de la bordure inférieure en une seule déclaration.
- border-bottom-style et border-bottom-width — les deux autres composantes nécessaires à une bordure inférieure.
- border-color — définit la couleur des quatre côtés à la fois.
- border-top-color, border-right-color, border-left-color — colorie les trois autres bords.