La proprietà
border-style
è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento./* 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;
Nota: Il valore di default di
border-style
è none
. Questo significa che se si cambia il border-width
e il border-color
, non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia none
o hidden
.Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Sintassi
La proprietà border-style
può essere specificata usando uno, due, tre o quattro valori.
- Un solo valore viene applicato a tutti e quattro i bordi.
- Specificando due valori, il primo verrà applicato top e bottom, il secondo come left e right.
- Con tre valori, il primo verrà applicato come top, il secondo a left e right e il terzo al bottom.
- Specificando quattro valori si applicheranno top, right, bottom e left in questo ordine (orario).
Ogni valore è una keyword scelta dalla seguente lista.
Valori
<br-style>
- E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori:
none
Come per la keyword hidden
, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato diborder-width
sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valorenone
ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.hidden
Come per la keyword hidden
, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato diborder-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.dotted
Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di border-width
.dashed
Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica. solid
Mostra una singola dritta e solida linea. double
Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come border-width
.groove
Mostra un bordo che porta ad un effetto intagliato. È l'opposto di ridge
.ridge
Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di groove
.inset
Mostra un bordo che fa apparire il box incassato.
E' l'opposto dioutset.
Quando viene applicato ad una cella in una tabella conborder-collapse
comecollapsed
, questo valore si comporta comegroove
.outset
Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di
inset
. Quando applicato ad una cella in una tabella conborder-collapse
comecollapsed
, questo valore si comporta comeridge
.
Sintassi Formale
<line-style>{1,4}where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Esempi
Tabella con tutti i valori della proprietà
Ecco un esempio con tutti i valori che la proprietà può assumere
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>
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;}
Output
Specifiche
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-style' in that specification. |
Candidate Recommendation | No change |
CSS Level 2 (Revision 1) The definition of 'border-style' in that specification. |
Recommendation | Added hidden |
CSS Level 1 The definition of 'border-style' in that specification. |
Recommendation | Initial definition |
Browser compatibility
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Vedi anche
- Le proprietà shorthand CSS relative al bordo:
border
,border-width
,border-color
,border-radius