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éCSSborder-top-style permet de définir le style de ligne de laborder supérieure d'un élément.

Note :La spécification ne définit pas comment les bordures de styles différents se rejoignent dans les coins.

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>    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-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: revert-layer;border-top-style: unset;

La propriétéborder-top-style se définit avec un seul mot-clé<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 défini
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

Définir`border-top-style`

HTML

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

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;}