Propriété CSS border-bottom-style
La propriété CSS border-bottom-style permet de définir le style de la bordure inférieure.
La propriété border-bottom-style ne sera pas visible à moins que border-bottom-width et border-bottom-color (ou les raccourcis border-bottom/border) ne soient également spécifiés.
INFO
Sachez que la spécification ne définit pas comment les bordures de styles différents se connectent dans les coins.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderBottomStyle = "dotted"; |
Syntaxe
Syntaxe de la propriété CSS border-bottom-style
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple de la propriété border-bottom-style :
Exemple de la propriété CSS border-bottom-style avec les valeurs solid et dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: solid;
}
div {
border-bottom-style: dashed;
}
</style>
</head>
<body>
<h2>A heading with a solid bottom border</h2>
<div>A div element with a dashed bottom border.</div>
</body>
</html>Résultat
Exemple de la propriété border-bottom-style avec plusieurs valeurs :
Exemple de la propriété CSS border-bottom-style avec les valeurs double, dashed et groove
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: double;
}
p {
border-style: solid;
border-bottom-style: dashed;
}
div {
border-bottom-style: groove;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>A heading with a double bottom border</h2>
<p> A paragraph with a dashed bottom border. </p>
<div>A div element with a groove bottom border.</div>
</body>
</html>Exemple de la propriété border-bottom-style avec la valeur "hidden" :
Exemple de la propriété border-bottom-style avec la valeur "hidden" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid black;
border-bottom-style: hidden;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Exemple de la propriété border-bottom-style avec la valeur "inset" :
Exemple de la propriété border-bottom-style avec la valeur "inset" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid;
border-bottom-style: inset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Exemple de la propriété border-bottom-style avec la valeur "outset" :
Exemple de la propriété border-bottom-style avec la valeur "outset" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
text-align: center;
border: 5px solid;
border-bottom-style: outset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| none | N'affiche aucune bordure. Valeur par défaut. | Tester » |
| hidden | Identique à "none", sauf pour la résolution des conflits de bordure sur les éléments de tableau. | Tester » |
| dotted | La bordure est spécifiée comme une série de points. | Tester » |
| dashed | La bordure est spécifiée comme une série de tirets. | Tester » |
| solid | La bordure est spécifiée comme une ligne pleine. | Tester » |
| double | La bordure est spécifiée comme deux lignes pleines. | Tester » |
| groove | Bordure 3D en creux donnant l'impression que la bordure est gravée. Opposé de ridge. | Tester » |
| ridge | Spécifie une bordure 3D en relief donnant l'impression d'une apparence extrudée. Opposé de groove. | Tester » |
| inset | Effet 3D donnant l'impression que l'élément est enfoncé. Opposé de outset. | Tester » |
| outset | Effet 3D donnant l'impression que l'élément est en relief. Opposé de inset. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Parmi les suivantes, lesquelles sont des valeurs valides pour la propriété border-bottom-style en CSS ?