border-style

/* 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;

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 di border-width sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore none 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 di 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.
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 di outset. Quando viene applicato ad una cella in una tabella con border-collapse come collapsed, questo valore si comporta come groove.
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 con border-collapse come collapsed, questo valore si comporta come ridge.

Sintassi Formale

<br-style>{1,4}
where 
<br-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

Specific​he

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] Precedente a Firefox 50, lo stile dei bordi con gli angoli arrotondati (con border-radius) sono sempre renderizzati come se border-style è solid. Questo è stato risolto in Firefox 50.

Vedi anche

• Le proprietà shorthand CSS relative al bordo: border, border-width, border-color, border-radius