CSS3: la proprietà border-radius

La proprietà border-radius delle specifiche CSS3 ci consente di gestire direttamente lo smussamento degli angoli del box. Niente più JavaScript né immagini per gli angoli!

Questo articolo prevede una pregressa conoscenza dei fogli di stile. Se siamo completamente a digiuno potremmo non comprendere tutto fino in fondo.
La proprietà border-radius era attesa da tempo e quando, nel 2012, iniziò a diffondersi tra i browser, in molti tra gli addetti ai lavori ne furono entusiasti.
Tale proprietà, come detto, ci consente di smussare gli angoli del box-nodel senza utilizzare niente altro che i fogli di stile.
Gli angoli del box sono gestiti da 4 ellissi virtuali, uno per ogni angolo, mostrati tratteggiati in rosso nella figura qui sotto.

Ogni ellisse è gestito tramite 2 raggi, rappresentati dalle frecce rosse nella figura qui sopra. Se i 2 raggi sono uguali l’ellisse diventa un cerchio. La proprietà border-radius ci consente di gestire questi raggi.
Per effettuare l’arrotondamento di un angolo è necessario agire sui due raggi (orizzontale e verticale) di ogni singolo ellisse virtuale. Il sistema inizia ad assegnare i valori dall’ellisse virtuale in alto a sinistra e procede poi in senso orario. Se impostiamo un solo raggio, tutte le ellissi si trasformano in cerchi.
Vediamo qualche esempio.

Creiamo un semplice <div>:

<div id="bordi"></div>

e assegniamogli il nostro CSS:

div {
    height:150px;
    background-color:yellow;
    border:medium solid red;
    border-radius: 50px;
}

Il risultato sarà il seguente.

Abbiamo quindi assegnato alle 4 ellissi virtuali lo stesso raggio orizzontale e verticale (50px) ottenendo il primo obiettivo: arrotondare tutti gli angoli.
Ora però vogliamo arrotondare solo l’angolo superiore sinistro.
Come fare?

border-radius: 50px 0 0 0;

Questo codice assegna il valore di 50px al raggio orizzontale e verticale del primo ellisse (quello in alto a sinistra). Assegna invece raggio nullo a tutti gli altri. Il risultato è proprio quello che ci aspettavamo.

Ora facciamo l’ultimo passo: gestire entrambi i raggi delle 4 ellissi virtuali.
Ammettiamo di voler ottenere qualcosa di simile a quanto mostrato dalla seguente figura.

Sembra chiaro che dobbiamo intervenire sul primo ellisse virtuale (quello in alto a sinistra). Tale ellisse dovrà avere il raggio verticale più grande di quello orizzontale. Per ottenere questo risultato possiamo scrivere il seguente codice CSS:

border-radius: 35px 0 0 0 / 80px 0 0 0;

oppure

border-radius: 35px 0 0 0 / 80px;

in quanto un raggio orizzontale nullo rende inutile qualsiasi assegnazione al raggio verticale.

In questo caso, possiamo osservare il codice in azione:
https://www.alessandrostella.it/lato_client/css3/css3_23.html

Abbiamo appena imparato che per gestire entrambi i raggi di un’ellisse virtuale bisogna usare il simbolo dello slash (/).
Quindi, nella sintassi della proprietà border-radius, i primi 4 numeri (separati da uno spazio) indicano il raggio orizzontale delle 4 ellissi (in mancanza dello slash il sistema utilizza tali valori anche per i raggi verticali). Se però vogliamo indicare esplicitamente i valori dei raggi verticali, allora ci basta usare lo slash (/).
Possiamo sbizzarrirci come più ci aggrada. Ad esempio, il seguente codice:

border-radius: 50px 50px 0 0 / 80px 80px;

produce il seguente risultato.

Insomma border-radius è proprio una gran bella proprietà!
Prima di proseguire proviamo a porci una domanda: conoscendo le proprietà border-style, border-width e border-radius, quale codice CSS dovremmo scrivere per ottenere il risultato mostrato nella seguente figura?

Concludiamo questo paragrafo osservando che nell’indicare i valori da assegnare ai raggi possiamo usare diverse unità di misura: px, pt, em, %.