Propriété CSS border-bottom
La propriété border-bottom est une propriété abrégée permettant de définir la largeur, le style et la couleur de la bordure inférieure. Les valeurs peuvent être réorganisées, mais l'ordre recommandé est largeur, style, puis couleur. Notez que border-style est obligatoire pour que la bordure s'affiche ; sans elle, la bordure n'apparaîtra pas, quelle que soit la couleur ou la largeur.
Si la largeur est omise, elle vaut par défaut medium. Si la couleur est omise, elle hérite de la couleur de l'élément parent. Si le style est omis, la bordure ne s'affichera pas.
| Valeur initiale | medium none currentColor |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Oui. La couleur et la largeur de la bordure inférieure 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>Résultat
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>Résultat
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é sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'border-bottom' ?