border-bottom-style
La propriété border-bottom-style est une propriété qui définit le style de la ligne du bas pour la bordure de la boîte d'un élément.Les valeurs acceptées par cette propriété sont représentées par dix mots-clés :
<!-- Style commun aux exemples qui suivent -->
<style>
.ex {
width: 300px;
height: 120px;
background-color: palegreen;
border-width: 6px;
border-color: #ff0000;
}
</style>
- none L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de border-width sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée. C'est la valeur par défaut.
border-bottom-style: none;
- hidden L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de border-width sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
border-bottom-style: hidden;
- dotted Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de border-width.
border-bottom-style: dotted;
- dashed Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
border-bottom-style: dashed;
- solid Affiche une ligne droite continue.
border-bottom-style: solid;
- double Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par border-width.
border-bottom-style: double;
- groove La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
border-bottom-style: groove;
- ridge La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
border-bottom-style: ridge;
- inset La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset).
border-bottom-style: inset;
- outset La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset).
border-bottom-style: outset;