Come è possibile creare elementi con angoli arrotondati solo mediante l'uso dei CSS, senza l'ausilio di immagini di sottofondo nè di codice Javascript?

Grazie ad una proprietà CSS che anticipa i tanto attesi CSS3, ma che è già supportata dalle versioni più recenti dei principali browsers: Border Radius.

Questa proprietà genera bordi arrotondati, in base al valore indicato, nei bordi del TAG su cui viene applicata.

Ottenere l'effetto - gradito e spesso usato - di bordo arrotondato nativamente da CSS invece che da immagini è vantaggioso per il webdesigner in termini di flessibilità (per variare l'effetto, basta cambiare un parametro CSS) e di minor peso in kilobyte per chi visita la pagina, spider dei motori di ricerca compresi.

Vediamo come applicare questa nuova interessante proprietà, supponendo di voler dare al nostro DIV un arrotondamento degli angoli di 15 pixels:

-moz-border-radius: 15px; /* Per i browser con base Mozilla(Gecko) */
-webkit-border-radius: 15px; /* Per i browser con base Webkit */
border-radius: 15px; /* Regola generale per CSS3 */

Le prime due dichiarazioni sono scritte per essere lette rispettivamente dai browser con motore di rendering Geko (Firefox, Flock, Camino, Galeon, Conkeror, Songbird, SeaMonkey) e Webkit (Apple Safari, Chrome, iCab, Midori, SrWare-Iron), la terza è la regola generale compatibile con lo standard CSS3.

La proprietà Border Radius non è, al momento, completamente crossbrowser: per gli utenti che navigano ancora con IE 6 o 7 ed Opera 9, l'arrotondamento dei bordi ottenuto con i CSS non sarà visibile.

Enjoy It!