Ho letto quest’interessantissimo articolo di gizstyle su come usare gli angoli tondi nativi con i css…visto che avrei dovuto riportare tutto il codice e poi la fonte…perchè non riportare direttamente tutto il post? gustatevelo…

Poco tempo fa leggevo che il web2.0 lo si può paragonare a un angolo tondo, in effetti la caratteristica più comune tra i vari prodotti 2.0 è il layout grafico con evidenti angoli tondi per ogni box di contenuto.
In principio, creavo elementi immagine che rappresentavano l’angolo tondo attribuendoli come fondo ai div, ottenendo l’effetto “rounded-corner”. Ora con Safari e Firefox che supportano CSS3 nativi e non, dico non perchè ognuno presenta un alternativa sfruttando il proprio motore di navigazione (webkit e Gecko); possiamo usufruire degli angoli tondi per il bordo di una div semplicemente attraverso regole CSS.

Regole CSS3 native non ancora pienamente supportate:

border-radius: 5px; (tutti gli angoli)
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

Regole Safari webkit, presentano la radice iniziale -khtml- sostituita poi da -webkit-:

-webkit-border-radius: 5px; (tutti gli angoli)
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

-khtml-border-radius: 5px; (tutti gli angoli)
-khtml-border-top-left-radius: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
-khtml-border-bottom-right-radius: 5px;

Regole Firefox:

-moz-border-radius: 5px; (tutti gli angoli)
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;

Nel realizzare una div con bordi tondi, di solito in una classe CSS vengono citate le regole per tutte le varie situazioni:

border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Purtroppo Microsoft non si smentisce mai, e queste soluzioni CSS3 non sono neanche lontanamente supportate, Internet Explor 7 sinceramente non mi dispiace, ma io mi chiedo, windows update e tutti i suoi aggiornamenti di Sicurezza, non posso infilarci anche un aggiornamento di compatibilità?
Beh confido in IE8, certo ora se si decide di utilizzare regole CSS3 bisogna scendere al consapevole compromesso che chi vede il sito con IE non vede determinati effetti, come il mio sito che presenta angoli tondeggianti visibili solo a Firefox e Safari.