Confini CSS
Le proprietà del bordo CSS consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento.
Ho confini su tutti i lati.
Ho un bordo inferiore rosso.
Ho i bordi arrotondati.
Stile bordo CSS
La border-styleproprietà specifica il tipo di bordo da visualizzare.
Sono ammessi i seguenti valori:
dotted- Definisce un bordo punteggiatodashed- Definisce un bordo tratteggiatosolid- Definisce un bordo solidodouble- Definisce un doppio bordogroove- Definisce un bordo scanalato 3D. L'effetto dipende dal valore del colore del bordoridge- Definisce un bordo increspato 3D. L'effetto dipende dal valore del colore del bordoinset- Definisce un bordo interno 3D. L'effetto dipende dal valore del colore del bordooutset- Definisce un bordo iniziale 3D. L'effetto dipende dal valore del colore del bordonone- Non definisce alcun confinehidden- Definisce un bordo nascosto
La border-styleproprietà può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).
Esempio
Dimostrazione dei diversi stili di bordo:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Risultato:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Nota: nessuna delle ALTRE proprietà del bordo CSS (di cui imparerai di più nei prossimi capitoli) avrà ALCUN effetto a meno che la
border-styleproprietà non sia impostata!