Come funziona border-radius
Ogni angolo è un quarto di ellisse. Con un solo valore, come border-radius: 24px, l’ellisse è un cerchio
di 24 px di raggio e i quattro angoli sono uguali. Con quattro valori si distribuiscono in senso orario partendo da
in alto a sinistra: alto-sinistra alto-destra basso-destra basso-sinistra. Se mancano dei valori, si copiano
dall’angolo opposto, proprio come in margin: per questo 0 120px crea una foglia.
La sintassi a otto valori e le forme organiche
Dopo la barra vengono i raggi verticali: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Così ogni angolo
smette di essere un arco di cerchio e diventa un arco di ellisse con due raggi diversi, ed è così che i siti moderni
creano i blob senza nessuna immagine né SVG. La modalità «Forma libera» lavora sempre in percentuale, così la
forma resta uguale anche se cambia la dimensione dell’elemento.
px o %: quale usare
- px per pulsanti, card e campi: l’arrotondamento resta lo stesso qualunque sia la dimensione.
- 50% per cerchi (su un quadrato) ed ellissi (su un rettangolo).
- Un valore enorme, come
999px, per le pillole: il browser lo limita a metà del lato corto e le estremità restano perfettamente tonde, qualunque sia la larghezza.
Arrotondare le immagini
border-radius ritaglia anche il contenuto di un’<img>, quindi basta per creare avatar
rotondi (border-radius: 50% su un’immagine quadrata). Se l’elemento ha figli che sporgono dagli angoli,
aggiungi overflow: hidden. L’anteprima usa un’immagine del generatore di ximg.es, che
puoi richiedere nella misura esatta del tuo layout:
<img src="https://ximg.es/160x160" style="border-radius: 50%" alt="">