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 id="default-example">
<div class="transition-all" id="example-element">
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 class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">petits points</td>
<td class="b4">tirets</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>
</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.