Angoli arrotondati senza immagini

Quando si vuole creare un box con gli angoli arrotondati, generalmente si crea – in base all’uso – una immagine già pronta oppure una serie di piccole immagini ognuna contenente uno dei quattro angoli richiesti (come nel caso di questo blog). Ma c’è un sistema, ancora in fase di bozza, per far generare al browser i quattro angoli necessari per il layout senza l’uso di alcuna immagine.
La funzione si chiama border-radius e ha questi valori:

• border-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-top-left-radius

In attesa che la funzione entri nelle specifiche ufficiali degli standard CSS, i software di casa Mozilla e quelli che usano Webkit già consentono l’uso di questo comando, diversamente, invece, da Explorer.

Implementazione Mozilla

Per l’uso con le applicazioni Mozilla queste sono le specifiche della funzione:

• -moz-border-radius: <top-left top-right bottom-right bottom-left>
• -moz-border-radius-topleft: <valore>
• -moz-border-radius-topright: <valore>
• -moz-border-radius-bottomright: <valore>
• -moz-border-radius-bottomleft: <valore>

Implementazione Webkit

Le applicazioni che usano webkit (come Safari) utilizzano questa implementazione:

• -webkit-border-radius: <top-left top-right bottom-right bottom-left>
• -webkit-border-top-left-radius: <valore>
• -webkit-border-top-right-radius: <valore>
• -webkit-border-bottom-right-radius: <valore>
• -webkit-border-bottom-left-radius: <valore>

Esempi

Ecco qualche esempio con relativo codice. Ovviamente, in attesa che la funzione diventi operativa, potete usare assieme l’implementazione Mozilla e quella Webkit.

I quattro angoli con solo il bordo a 10px

<div style="border: 1px solid #ccc;
padding: 5px 5px 5px 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
Lorem ipsum dolor sit amet...
</div>

I quattro angoli a 20px con riempimento e senza bordo

<div style="background-color: #ccc;
padding: 5px 5px 5px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;">
Lorem ipsum dolor sit amet...
</div>

I quattro angoli a 10px con riempimento e senza bordo

<div style="background-color: #ccc;
padding: 5px 5px 5px 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
Lorem ipsum dolor sit amet...
</div>

Superiore sinistro a 10px

<div style="background-color: #ccc;
padding: 5px 5px 5px 15px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Superiore destro a 10px

<div style="background-color: #ccc;
padding: 5px 5px 5px 15px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Inferiore destro a 10px

<div style="background-color: #ccc;
padding: 5px 5px 5px 15px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Inferiore sinistro a 10px

<div style="background-color: #ccc;
padding: 5px 5px 5px 15px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Fonti: Mozilla Developer Center, W3C CSS3 Backgrounds and Borders Module, CSS3.info.

Non sono un webdesigner né tantomeno un esperto di codice HTML&Co.: se ho scritto inesattezze, segnatale pure nei commenti. Grazie per la pazienza! 🙂