MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

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
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 20 or earlier (12) 1.0 (1.7 or earlier)[1] 4.0 3.5 1.0
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.6 20 or earlier (12) 1.0 (1.9.2)[1] 7.0 (Yes) 3.0

[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

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: SerenaG
 Ultima modifica di: SerenaG,