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

<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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 3Chrome Android ? Edge Mobile Full support 12Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Vedi anche

Tag del documento e collaboratori

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