1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
---
title: border-top-style
slug: Web/CSS/border-top-style
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/border-top-style
---
<div>{{CSSRef}}</div>
<p>La propriété<strong> <code>border-top-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.</p>
<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div>
<div class="note">
<p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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: inherit;
border-top-style: inherit;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><br-style></code></dt>
<dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes :
<table class="standard-table">
<tbody>
<tr>
<td><code>none</code></td>
<td>L'effet obtenu est le même qu'avec <code>hidden</code> : 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 {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td>
</tr>
<tr>
<td><code>hidden</code></td>
<td>L'effet obtenu est le même qu'avec <code>none</code> : 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 {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td>
</tr>
<tr>
<td><code>dotted</code></td>
<td>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 {{cssxref("border-top-width")}}.</td>
</tr>
<tr>
<td><code>dashed</code></td>
<td>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.</td>
</tr>
<tr>
<td><code>solid</code></td>
<td>Affiche une ligne droite continue.</td>
</tr>
<tr>
<td><code>double</code></td>
<td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.</td>
</tr>
<tr>
<td><code>groove</code></td>
<td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
</tr>
<tr>
<td><code>ridge</code></td>
<td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
</tr>
<tr>
<td><code>inset</code></td>
<td>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 <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
</tr>
<tr>
<td><code>outset</code></td>
<td>
<p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
</td>
</tr>
</tbody>
</table>
</dd>
<dt><code>inherit</code></dt>
<dd>Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Aucune modification significative.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.border-top-style")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Les autres propriétés liées au style des bordures :
<ul>
<li>{{cssxref("border-left-style")}}</li>
<li>{{cssxref("border-right-style")}}</li>
<li>{{cssxref("border-bottom-style")}}</li>
<li>{{cssxref("border-style")}}.</li>
</ul>
</li>
<li>Les autres propriétés liées à la bordure haute :
<ul>
<li>{{cssxref("border-top")}}</li>
<li>{{cssxref("border-top-color")}}</li>
<li>{{cssxref("border-top-width")}}.</li>
</ul>
</li>
</ul>
|
