Propriété CSS border-bottom-width
La propriété border-bottom-width définit la largeur de la bordure inférieure.
Pour voir l'effet de border-bottom-width, vous devez également définir une border-style ou la propriété border-bottom-style. Sans style de bordure, la largeur n'a aucun effet visible.
La spécification ne définit pas l'épaisseur exacte pour chaque mot-clé ; le résultat précis dépend de l'implémentation. Cependant, ils suivent toujours la séquence thin ≤ medium ≤ thick, et les valeurs restent constantes dans un document unique.
| Valeur initiale | medium |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | 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 | Tester » |
|---|---|---|
| medium | Définit une bordure inférieure de taille moyenne. C'est la valeur par défaut. | Tester » |
| thin | Définit une bordure inférieure fine. | Tester » |
| thick | Définit une bordure inférieure épaisse. | Tester » |
| length | Définit la largeur de la bordure inférieure à une valeur de longueur spécifique. | Tester » |
| initial | Réinitialise la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite de la valeur de la propriété de l'élément parent. |
Pratique
Parmi les valeurs suivantes, lesquelles sont acceptées par la propriété border-bottom-width en CSS ?