Proprietà CSS stile bordo
Esempio
Imposta uno stile per il bordo:
div {border-style: dotted;}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La border-style
proprietà imposta lo stile dei quattro bordi di un elemento. Questa proprietà può avere da uno a quattro valori.
Esempi:
- stile bordo: punteggiato pieno doppio tratteggiato;
- il bordo superiore è punteggiato
- il bordo destro è solido
- il bordo inferiore è doppio
- il bordo sinistro è tratteggiato
- stile bordo: doppio pieno punteggiato;
- il bordo superiore è punteggiato
- i bordi destro e sinistro sono solidi
- il bordo inferiore è doppio
- stile bordo: solido punteggiato;
- i bordi superiore e inferiore sono tratteggiati
- i bordi destro e sinistro sono solidi
- stile bordo: punteggiato;
- tutti e quattro i bordi sono tratteggiati
Valore di default: | nessuno |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS1 |
sintassi JavaScript: | oggetto .style.borderStyle="doppio tratteggiato" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota: il valore "nascosto" non è supportato in IE7 e precedenti. IE8 richiede un !DOCTYPE. IE9 e versioni successive supportano "nascosto".
Sintassi CSS
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
none | Default value. Specifies no border | |
hidden | The same as "none", except in border conflict resolution for table elements | |
dotted | Specifies a dotted border | |
dashed | Specifies a dashed border | |
solid | Specifies a solid border | |
double | Specifies a double border | |
groove | Specifies a 3D grooved border. The effect depends on the border-color value | |
ridge | Specifies a 3D ridged border. The effect depends on the border-color value | |
inset | Specifies a 3D inset border. The effect depends on the border-color value | |
outset | Specifies a 3D outset border. The effect depends on the border-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Un bordo tratteggiato:
div {border-style: dashed;}
Esempio
Un confine solido:
div {border-style: solid;}
Esempio
Un doppio confine:
div {border-style: double;}
Esempio
Un bordo di scanalatura:
div {
border-style: groove;
border-color: coral;
border-width: 7px;
}
Esempio
Un confine di cresta:
div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}
Esempio
Un bordo interno:
div {
border-style: inset;
border-color: coral;
border-width: 7px;
}
Esempio
Un confine iniziale:
div {
border-style: outset;
border-color: coral;
border-width: 7px;
}
Esempio
Imposta bordi diversi 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;}
Pagine correlate
Tutorial CSS: Bordo CSS
Riferimento HTML DOM: proprietà borderStyle