Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà border-style definisce lo stile dei quattro bordi di un elemento. Questa proprietà può avere da uno a quattro valori.
Esempi:
- border-style:dotted solid double dashed;
- bordo superiore è punteggiata
- bordo destro è solido
- bordo inferiore è doppio
- bordo sinistro è tratteggiata
- border-style:dotted solid double;
- bordo superiore è punteggiata
- i bordi destro e sinistro sono solidi
- bordo inferiore è doppio
- border-style:dotted solid;
- bordi superiore e inferiore sono punteggiate
- i bordi destro e sinistro sono solidi
- border-style:dotted;
- tutti e quattro i bordi sono punteggiate
| Valore di default: | none |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS1 |
| sintassi JavaScript: | object .style.borderStyle="dotted double" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Il valore "hidden" non è supportato in IE7 e versioni precedenti. IE8 richiede un DOCTYPE!. IE9 e sostegno in seguito "hidden" .
CSS Sintassi
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| none | Valore di default. Specifica nessun bordo | Gioca " |
| hidden | Lo stesso che "none" , fatta eccezione per la risoluzione dei conflitti di frontiera per gli elementi di tabella | Gioca " |
| dotted | Specifica un bordo punteggiato | Gioca " |
| dashed | Specifica un bordo tratteggiato | Gioca " |
| solid | Specifica un bordo solido | Gioca " |
| double | Specifica un doppio bordo | Gioca " |
| groove | Specifica un bordo 3D scanalato. L'effetto dipende dal valore border-color | Gioca " |
| ridge | Specifica un bordo 3D increspato. L'effetto dipende dal valore border-color | Gioca " |
| inset | Specifica un bordo 3D inserto. L'effetto dipende dal valore border-color | Gioca " |
| outset | Specifica un bordo fin dall'inizio in 3D. L'effetto dipende dal valore border-color | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Impostare bordi differenti su ciascun lato di un elemento:
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS Border
Di riferimento HTML DOM: borderStyle property