Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
border-top-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éborder-top-style définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.
Exemple interactif
border-top-style: none;border-top-style: dotted;border-top-style: dashed;border-top-style: solid;border-top-style: groove;border-top-style: inset;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}body { background-color: #fff;}Note :La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
Syntaxe
/* Valeurs avec un mot-clé */border-top-style: none;border-top-style: hidden;border-top-style: dotted;border-top-style: dashed;border-top-style: solid;border-top-style: double;border-top-style: groove;border-top-style: ridge;border-top-style: inset;border-top-style: outset;/* Valeurs globales */border-top-style: inherit;border-top-style: initial;border-top-style: revert;border-top-style: unset;La propriétéborder-top-style se définit avec l'un des mots-clés utilisés par la propriétéborder-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-top-style =
<line-style>
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
Exemples
HTML
<table> <tr> <td>none</td> <td>hidden</td> <td>petits points</td> <td>tirets</td> </tr> <tr> <td>solid</td> <td>double</td> <td>groove</td> <td>ridge</td> </tr> <tr> <td>inset</td> <td>outset</td> </tr></table>CSS
/* On applique un style sur le tableau */table { border-width: 2px; background-color: #52e385;}tr,td { padding: 3px;}/* Des exemples pour border-top-style */.b1 { border-top-style: none;}.b2 { border-top-style: hidden;}.b3 { border-top-style: dotted;}.b4 { border-top-style: dashed;}.b5 { border-top-style: solid;}.b6 { border-top-style: double;}.b7 { border-top-style: groove;}.b8 { border-top-style: ridge;}.b9 { border-top-style: inset;}.b10 { border-top-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-bottom-style,border-style.Les autres propriétés liées à la bordure haute :
border-top,border-top-color,border-top-width.