Bordi tondi nei box? Basta una riga!

Come ben sappiamo il metodo più diffuso per creare dei bordi tondi nelle tabelle (e fondamentalmente anche quello più compatibile con tutti i browser) è quello di creare delle gif da posizionare ai lati e che in qualche modo diano l’illusione all’utente che la tabella (o il box) siano effettivamente un’unica figura intera con i bordi smussati.

La cosa bella è stato lo scoprire come con i CSS3 lo standard invece sarà una semplice riga di codice! In realtà già oggi i browser con motore Gecko (è il caso di Mozilla e di tutti i suoi derivati compreso Firefox) sono pienamente in grado di decodificare l’istruzione, stessa cosa purtroppo (ma non è una novità) non si può dire di Internet Explorer, che invece non sa neppure dove mettere le mani per stampare a video la semplicissima istruzione che riporto.

Se volete ottenere bordi smussati basterà inserire tra le varie regole del box la dicitura -moz-border-radius: 12px , dove il numero di pixel rappresenta il raggio del cerchio formato dai 4 angoli. Ovviamente più alto è il valore, più grande sarà la smussatura, è in ogni caso simpatico mettersi lì a smanettare per trovare il valore che più si confà al nostro layout. Con questa piccola scoperta abbiamo finalmente un metodo semplice e rapido per variare ancora di più l’aspetto standard dei nostri box o tabelle che siano.

Edit: Importante! In fase di validazione del vostro CSS la stringa immessa verrà probabilmente segnalata come errore. Non importa…la proprietà funziona già perfettamente sin da ora, il problema è che fa parte di uno standard che ancora deve essere settato ma del quale già esistono diverse proprietà implementate già da ora ed uscite fuori dopo l’implementazione dello standard CSS2 diversi anni fa. Per cui non preoccupatevi ed usatela pure