verosimile.it

Esperimenti CSS

Creare facilmente div con angoli tondi senza usare immagini e javascript

Una soluzione CSS veloce, configurabile, leggera, validata, dal layout elastico. Insomma, una soluzione con le palle... quattro palle, per essere precisi!

Premessa: tengo a precisare che questa è una soluzione che ha la sua ragione di vita nell’essere “cross browser”. Se per voi è sufficente offrire un layout con angoli tondi per gli utenti di Firefox e Safari/Chrome, potete utilizzare la proprietà CSS3 “-border-radius”:

-moz-border-radius: 10px (per Firefox)
-webkit-border-radius: 10px (per Safari/Chrome)

Mesi fa avevo proposto una procedura CSS per creare box con angoli tondi senza immagini, utilizzando le liste di definizione. Vediamo ora una versione che fa uso dei classici div, quindi molto più familiare a chi sviluppa siti web.
Il punto di forza della versione con liste di definizione era il fatto che non venivano richiesti tag aggiuntivi, potendo utilizzare, per creare l’effetto “stondatura”, gli stili applicati ai vari elementi della definition list (dl), ossia i tag definition term (dt) e definition detail (dd).
Ora invece non abbiamo a disposizione che un singolo tag - il div, appunto - per cui saremo costretti ad usare degli elementi aggiuntivi... o qualsi!

Utilizzeremo infatti quattro bullet (•) posizionati alla fine del div, che avranno, nel flusso del documento, la funzione di una spaziatura tipografica (come il tag hr, per intenderci). Come avrete capito, l’escamotage che permette di creare angoli tondi senza immagini o javascript sta tutto nell’utilizzo di questi quattro bullet. Vediamo come.