border-bottom-style
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS border-bottom-style définit le style de ligne de la bordure (border) inférieure d'un élément.
Note : La spécification ne définit pas la façon dont les bordures de styles différents se rejoignent dans les coins.
Exemple interactif
border-bottom-style: none;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: groove;
border-bottom-style: inset;
<section id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec une bordure autour.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
body {
background-color: white;
}
Syntaxe
css
/* Valeurs avec un mot-clé */
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;
/* Valeurs globales */
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: revert;
border-bottom-style: revert-layer;
border-bottom-style: unset;
La propriété border-bottom-style est définie avec un seul mot-clé de type <line-style>.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
border-bottom-style =
<line-style>
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Exemples
Démonstration de tous les styles de bordure
HTML
html
<table>
<tbody>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</tbody>
</table>
CSS
css
/* On applique un style sur le tableau */
table {
border-width: 2px;
background-color: #52e385;
}
tr,
td {
padding: 3px;
}
/* Des exemples pour border-bottom-style */
.b1 {
border-bottom-style: none;
}
.b2 {
border-bottom-style: hidden;
}
.b3 {
border-bottom-style: dotted;
}
.b4 {
border-bottom-style: dashed;
}
.b5 {
border-bottom-style: solid;
}
.b6 {
border-bottom-style: double;
}
.b7 {
border-bottom-style: groove;
}
.b8 {
border-bottom-style: ridge;
}
.b9 {
border-bottom-style: inset;
}
.b10 {
border-bottom-style: outset;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-style |
Compatibilité des navigateurs
Voir aussi
- Les autres propriétés liées au style des bordures :
border-left-style,border-right-style,border-top-styleetborder-style. - Les autres propriétés liées à la bordure basse :
border-bottom,border-bottom-coloretborder-bottom-width.