Propriété CSS border-bottom
CSS border-bottom définit la largeur, le style et la couleur de la bordure inférieure d'un élément en une seule déclaration.
La propriété border-bottom est un raccourci CSS qui définit la largeur, le style et la couleur de la bordure inférieure d'un élément en une seule déclaration. Au lieu d'écrire trois propriétés longues séparées, vous les définissez toutes en même temps :
/* Longhand — three declarations */
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #1c87c9;
/* Shorthand — one declaration, same result */
border-bottom: 3px solid #1c87c9;Cette page couvre la syntaxe, les valeurs acceptées, des exemples concrets et le piège le plus fréquent (un style manquant) pour que votre bordure s'affiche correctement.
Comportement des valeurs
Vous pouvez lister les trois valeurs dans n'importe quel ordre, mais l'ordre recommandé est largeur, style, couleur. Toute valeur omise revient à sa valeur par défaut :
- Largeur omise → par défaut
medium(environ 3px dans la plupart des navigateurs). - Couleur omise → par défaut
currentColor, c'est-à-dire la couleur du texte de l'élément. - Style omis → par défaut
none, ce qui signifie que la bordure ne s'affiche pas du tout.
Ce dernier point est la raison numéro un pour laquelle border-bottom « ne fonctionne pas » : sans border-style, le navigateur ne dessine rien quelle que soit la largeur ou la couleur définie.
/* Renders nothing — no style given */
.no-border { border-bottom: 5px #1c87c9; }
/* Renders a 5px blue solid line */
.works { border-bottom: 5px solid #1c87c9; }Quand utiliser border-bottom
Utilisez border-bottom lorsque vous souhaitez une ligne sur un seul côté d'un élément plutôt qu'un cadre complet. Cas d'usage courants :
- Titres soulignés ou séparateurs de section — un trait coloré et plus épais sous un
<h2>. - Indicateurs de navigation ou d'onglets — mise en évidence du lien actif avec une bordure inférieure.
- Champs de saisie — le style « Material Design » n'utilise qu'une bordure inférieure plutôt qu'un encadré complet.
Si vous avez besoin de la même bordure sur les quatre côtés, utilisez le raccourci border à la place. Pour les autres côtés individuels, consultez border-top, border-left et border-right.
| Valeur initiale | medium none currentColor |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Non. |
| Animatable | Oui. La couleur et la largeur de border-bottom sont animables. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderBottom = "15px dotted blue"; |
Syntaxe
Syntaxe de la propriété CSS border-bottom
border-bottom: border-width | border-style | border-color | initial | inherit;Exemple de la propriété border-bottom :
Exemple de la propriété CSS border-bottom avec la valeur groove
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>Exemple d'utilisation de la propriété border-bottom avec les éléments <h2>, <p> et <div> :
Exemple de la propriété CSS border-bottom avec les valeurs dashed, double et ridge
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>A heading with a dashed blue bottom border.</h2>
<p>A paragraph with a double green bottom border.</p>
<div>A div element with a ridge gray bottom border.</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| border-bottom-style | Définit le style de la bordure inférieure. La valeur par défaut est "none". |
| border-bottom-width | Définit la largeur de la bordure inférieure. La valeur par défaut est "medium". |
| border-bottom-color | Définit la couleur de la bordure inférieure. La valeur par défaut est la couleur du texte. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
border— le raccourci pour les quatre côtés.border-top,border-left,border-right— les autres raccourcis par côté.border-bottom-width,border-bottom-style,border-bottom-color— les trois propriétés longues vers lesquellesborder-bottomse décompose.border-style,border-width,border-color— contrôlent les quatre côtés à la fois pour chaque aspect.