Propriété CSS border-bottom-width
Utilisez border-bottom-width pour définir la largeur de la bordure inférieure d'un élément. Découvrez les valeurs acceptées par cette propriété CSS.
La propriété border-bottom-width définit la largeur (épaisseur) de la bordure inférieure d'un élément. Elle contrôle uniquement le bord inférieur — pour styliser les quatre côtés à la fois, utilisez plutôt le raccourci border-width.
Cette page explique quelles valeurs border-bottom-width accepte, pourquoi elle nécessite un style de bordure pour s'afficher, la différence entre les mots-clés thin/medium/thick et les longueurs explicites, et comment elle se rapporte aux autres propriétés de largeur par côté.
Pourquoi la largeur n'affiche souvent rien
Pour voir l'effet de border-bottom-width, vous devez également définir un style de bordure avec la propriété border-style ou border-bottom-style. Le style de bordure initial est none, et une bordure avec le style none n'est jamais rendue, quelle que soit sa largeur — la largeur n'a donc aucun effet visible par elle-même.
/* Invisible: no style set */
.box { border-bottom-width: 10px; }
/* Visible: width + style together */
.box { border-bottom-width: 10px; border-bottom-style: solid; }Valeurs acceptées
Vous pouvez définir la largeur de deux façons :
- Longueur — toute longueur CSS telle que
4px,0.25emou0.1rem. Il s'agit de l'option la plus prévisible car le résultat est exactement celui que vous spécifiez. Les longueurs négatives ne sont pas autorisées et sont traitées comme invalides. - Mots-clés —
thin,mediumouthick. La spécification ne définit pas une épaisseur en pixels précise pour chaque mot-clé ; le résultat exact dépend de l'implémentation. Les mots-clés suivent toujours le schémathin≤medium≤thick, et un mot-clé donné reste constant au sein d'un même document. Dans la plupart des navigateurs, ils correspondent approximativement à1px,3pxet5px.
Si vous avez besoin que la largeur soit cohérente entre les navigateurs, préférez une longueur explicite aux mots-clés.
| Valeur initiale | medium |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritage | Non. |
| Animatable | Oui. La largeur peut être animée. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderBottomWidth = "5px"; |
Syntaxe
Syntaxe de la propriété CSS border-bottom-width
border-bottom-width: medium | thin | thick | length | initial | inherit;Exemple de la propriété border-bottom-width :
Exemple de la propriété CSS border-bottom-width avec la valeur thick
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
As you can see, we used border-bottom-width property to set the width of bottom border of this element.
</p>
</body>
</html>Résultat
Exemple de la propriété border-bottom-width avec la valeur « medium » :
Exemple de la propriété CSS border-bottom-width avec la valeur medium
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>A heading with a medium bottom border.</h2>
<div>A div element with a medium bottom border.</div>
</body>
</html>Exemple de la propriété border-bottom-width montrant la différence entre les valeurs « thin » et « thick » :
Exemple de la propriété CSS border-bottom-width avec la valeur thin
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>A heading with thin bottom border</h2>
<div>A div element with thick bottom border.</div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| medium | Définit une bordure inférieure moyenne. Il s'agit de la valeur par défaut. | Essayer » |
| thin | Définit une bordure inférieure fine. | Essayer » |
| thick | Définit une bordure inférieure épaisse. | Essayer » |
| length | Définit la largeur de la bordure inférieure à une valeur de longueur spécifique. | Essayer » |
| initial | Réinitialise la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la valeur de la propriété depuis son élément parent. |
Propriétés associées
border-bottom-width est l'une des quatre propriétés de largeur par côté. Utilisez celle qui correspond à chaque bord, ou le raccourci lorsque vous souhaitez en définir plusieurs à la fois :
- border-top-width, border-right-width, border-left-width — les trois autres bords individuels.
- border-width — raccourci qui définit les quatre largeurs en une seule déclaration.
- border-bottom-style et border-bottom-color — le style et la couleur du même bord inférieur.
- border-bottom — raccourci pour la largeur, le style et la couleur du bord inférieur ensemble.