Angoli arrotondati senza immagini

Come arrotondare gli angoli di un box di una pagina HTML senza far uso di alcuna immagine, ma solo dei tag CSS.

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

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<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

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<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

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<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

Lorem ipsum dolor sit amet.
<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

Lorem ipsum dolor sit amet.
<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

Lorem ipsum dolor sit amet.
<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

Lorem ipsum dolor sit amet.
<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! :)

Autore: Aldo Latino

Aldo Latino usa con entusiasmo Linux nella distribuzione Ubuntu, è un appassionato di WordPress e si diletta a fare il blogger. Ha anche una lista dei desideri. Per altre informazioni visita la sua .

2 pensieri riguardo “Angoli arrotondati senza immagini”

I commenti sono chiusi