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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
---
title: border-style
slug: Web/CSS/border-style
translation_of: Web/CSS/border-style
---
<div>{{CSSRef}}</div>
<div>La proprietà <strong><code>border-style</code></strong> è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.</div>
<div></div>
<pre class="brush: css no-line-numbers">/* Applicato a tutti 4 i lati */
border-style: dashed;
/* verticale | orrizzontale */
border-style: dotted solid;
/* superiore | orizzontale | inferiore */
border-style: hidden double dashed;
/* superiore | destra | inferiore | sinistra */
border-style: none solid dotted dashed;
/* Valori globali */
border-style: inherit;
border-style: initial;
border-style: unset;
</pre>
<div class="note"><strong>Nota:</strong> Il valore di default di <code>border-style</code> è <code>none</code>. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il <span style="white-space: nowrap;">{{ Cssxref("border-color") }},</span> non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia <code>none</code> o <code>hidden</code>.</div>
<p>{{cssinfo}}</p>
<h2 id="Sintassi">Sintassi</h2>
<p>La proprietà <code>border-style</code> può essere specificata usando uno, due, tre o quattro valori.</p>
<ul>
<li><strong>Un solo</strong> valore viene applicato a tutti e quattro i bordi.</li>
<li>Specificando<strong> due </strong>valori, il primo verrà applicato <strong>top e bottom</strong>, il secondo come <strong>left e right</strong>.</li>
<li>Con <strong>tre</strong> valori, il primo verrà applicato come <strong>top</strong>, il secondo a <strong>left e right</strong> e il terzo al <strong>bottom</strong>.</li>
<li>Specificando <strong>quattro</strong> valori si applicheranno <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong> e <strong>left</strong> in questo ordine (orario).</li>
</ul>
<p>Ogni valore è una keyword scelta dalla seguente lista.</p>
<h3 id="Valori">Valori</h3>
<dl>
<dt><code><br-style></code></dt>
<dd>E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori:
<table class="standard-table">
<tbody>
<tr>
<td style="vertical-align: middle;"><code>none</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore <code>none</code> ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>hidden</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>dotted</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>dashed</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>solid</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Mostra una singola dritta e solida linea.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>double</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>groove</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto intagliato. È l'opposto di <code>ridge</code>. </td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>ridge</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di <code>groove</code>.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>inset</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">Mostra un bordo che fa apparire il box incassato.<br>
E' l'opposto di <code>outset.</code> Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>groove</code>.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>outset</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">
<p>Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di <code>inset</code>. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>ridge</code>.</p>
</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="Sintassi_Formale">Sintassi Formale</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Esempi">Esempi</h2>
<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabella con tutti i valori della proprietà</h3>
<p>Ecco un esempio con tutti i valori che la proprietà può assumere</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</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>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">/* Definizione stile tabella */
table {
border-width: 3px;
background-color: #52E396;
}
tr, td {
padding: 2px;
}
/* border-style classi di esempio */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}</pre>
<h4 id="Output">Output</h4>
<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td>No change</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Added <code>hidden</code></td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.border-style")}}</p>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
<li>Le proprietà shorthand CSS relative al bordo: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li>
</ul>
|
