Angoli arrotondati

Nelle interfacce moderne, sempre più spesso si vedono box con angoli arrotondati e smussati. Un effetto visivo non male, considerando che gli angoli possono essere lavorati indipendentemente l’uno dall’altro.
Con i CSS questa è una cosa semplicissima.

Per creare un angolo arrotondato ricorriamo alla proprietà “border-radius”, che però non è una proprietà standard, riconoscoiuta cioè da tutti i browser sul mercato.
Oggi come oggi, sono ancora presenti nel web, tre tipologie di browser, ognuno delle quali, presenta delle carateristiche proprie, che non intende abbandonare.

Ed è cosi che alcuni comandi CSS, per dare la massima compatibilità agli sviluppatori, presentano alcune piccole differenze.
In buona sostanza, si tratta di anteporre una paticella identificativa, che consentirà ai vari browser di capire ed eseguire il comando.

Compatibilità fra browser

Fortunatamente sono solo 4 varianti, di cui una (quella per Opera) può essere omessa, dato che i produttori del navigatore svedese, molto più arguti degli altri, si sono subito allineati alle direttive del consorzio (W3C consortium ) che si occupa di controllare tutto ciò che appare sul web.

• -moz- Usata per i browser tipo Firefox
• -webkit- Usata per i browser tipo Safari
• -o- Usata per i browser tipo Opera
• Nessun prefisso viene usato per i browser tipo Internet Explorer

Il valore numerico, rappresenta il raggio dell’angolo: 0 (zero) = angolo a 90°.

/* arrotondamento degli angoli */
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
-o-border-radius : 10px;
border-radius : 10px;

Se viene precisato un solo valore, l’arrotondamento verrà applicato su tutti e quattro gli angoli contemporaneamente.
Se invece si desidera creare degli effetti visivi si possono valorizzare separatamente i singoli angoli nel seguente ordine: top, right, bottom, left, in senso orario.
Da notare che questa istruzione, prevede che ogni angolo sia composto da due metà, e che ognuna delle due metà sia personalizzabile.
Ci troviamo difronte quindi ad un comando che permette di dividere ogni angolo in due parti, una verticale “y”e una orizzontale “x”.
Pertanto si può anche scrivere una istruzione di questo tipo:

Border-radius : topx rightx bottomx leftx / topy righty bottomy lefty;

ma è sicuramente poco utilizzata.