border-style

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 nonehidden.
Initial valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typediscrete

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

<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

Specific​he

Browser compatibility

BCD tables only load in the browser

Vedi anche