Mattepuffo.com

I CSS3 portano con loro molte novità e proprietà che faciliteranno molto il lavoro e abbelliranno l'aspetto delle pagine web.

Accanto ad HTML 5 il ptenziale poi diventa enorme!

Ad oggi però non è ancora standard e quindi non sono ufficialmente supportati da tutti i browser.

In verità tutto ciò che ho porvato ha funzionato su tutti i browser, tranne che su Intenet Explorer ovviamente!

In questo articolo descrivo come ottenere dei semplici angoli arrotondati senza usare immagini o tecniche particolari.

Useremo la proprietà border-radius.

Nello specifico sono:

border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius

Possiamo anche compattarli con:

border-radius:40px 20px;

o semplicemente con

border-radius:20px;

Per farla breve i raggruppamenti seguono le stesse impostazioni delle altre proprietà CSS.

Tenete in considerazione che si parte dall'angolo in alto a sinistra e si prosegue in senso orario.

Per quanto rigurarda i browser dobbiamo dire che così non funziona nulla, dobbiamo aggiunger qualcosa:

-moz-border-radius:40px 20px;
-webkit-border-radius:40px 20px;
border-radius:40px 20px;

Così andrebbe scritto.

Come vedete si devono aggiungere i suffussi -moz per Firefox e -webkit per i browser che usano questo motore (ad esempio Safari).

Queste impostazioni funzionano con tutti tranne che con IE; al posto degli angoli tondi ci saranno i classici spigoli.