border-top-style
La propriété border-top-style est une propriété qui définit le style de la ligne supérieure 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-top-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-top-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-top-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-top-style: dashed;
- solid Affiche une ligne droite continue.
border-top-style: solid;
- double Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par border-width.
border-top-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-top-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-top-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-top-style: inset;
- outset La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset).
border-top-style: outset;