Creare angoli arrotondati senza usare immagini

Per anni gli sviluppatori hanno cercato di costruire dei layout con gli angoli arrotondati spesso sfruttando tabelle innestate contenenti delle immagini per venire incontro alle esigenze di svariati browser. Oggi questo problema è solo un ricordo grazie all'uso dei CSS e siamo in grado di sfruttarne le potenzialità per stilizzare i nostri "micrositi" senza usare alcuna immagine.

Nell'esempio seguente creiamo un campo testuale che verrà utilizzato da Safari sull'iPhone. Per fare ciò, useremo la proprietà CSS -webkit-border-radius. Ecco un esempio del suo utilizzo:

<style type="text/css">.foo {  font-family: Verdana;  font-size: 40px;  color: black;  -webkit-border-radius:25px;  background:#F2FFE1;}  </style>

E' possibile specificare questa classe per ogni campo testuale, come mostrato nel codice sottostante:

<input type="text" name="name"        size="20" class="foo"        value="import" />

Come potete vedere, specifichiamo un valore pari a 25 per la proprietà -webkit-border-radius che verrà applicato al campo testuale (si veda il risultato nell'immagine seguente):

Questo esempio può essere facilmente esteso per creare angoli arrotondati al fine di stilizzare altri elementi della pagina. Assicuratevi che la proprietà sia supportata, poichè non è compatibile con alcuni browser per desktop. Ad ogni modo rimane una delle proprietà pià utili dei CSS quando si tratta di sviluppare contenuti web per MobileSafari sull'iPhone.

Fonte: iPhone Microsites