Articoli

CSS: proprietà border-style

di eugy

La proprietà CSS border-style permette di impostare lo stile dei bordi di un elemento; si può anche impostare separatamente per ciascun lato usando

border-top-style

border-right-style

border-bottom-style

border-left-style

rispettivamente per il bordo superiore, destro, inferiore e sinistro. I valori possibili sono:

none: nessun bordo

solid: bordo continuo

dotted: puntinato (per i bordi più spessi di 1px, in Firefox viene visualizzato come dei “trattini” quadrati, mentre in Explorer vengono resi dei cerchi)

dashed: tratteggiato

double: doppio, con due righe continue affiancate (ha senso solo per i bordi più spessi di 6px)

groove: inciso, reso con due colori e con un’ombra sul lato superiore e sinistro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero; dato che ciascun lato ha due colori, ha senso solo per bordi più spessi di 6px)

ridge: in rilievo, reso con due colori come per groove ma con i lati invertiti

inset: inciso, reso con due colori, di cui uno viene usato per i lati superiore e sinistro, l’altro per quelli inferiore e destro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero)

outset: in rilievo, reso con due colori come per inset ma con i lati invertiti

Qui trovate una dimostrazione dei vari stili del bordo, da controllare con i diversi browser :)

Lascia una risposta

Dovete essere loggati per inviare un commento.

Archivi e link