Vai al contenuto

Generatore border-radius CSS

Genera border-radius CSS visivamente con anteprima dal vivo. Regola ogni angolo individualmente. Supporta angoli ellittici. Copia il codice CSS. Gratuito, 100% nel browser.

Anteprima

12px
12px
12px
12px
Unità

Codice CSS

 

Cos'è border-radius CSS?

La proprietà border-radius arrotonda gli angoli di un elemento. Si può impostare un valore diverso per ciascuno dei 4 angoli, specificato in pixel, percentuale o altre unità CSS. Impostando 50% l'elemento diventa un cerchio o un'ellisse.

Sintassi

Un valoreborder-radius: 10px applica lo stesso arrotondamento a tutti gli angoli. Quattro valoriborder-radius: 10px 20px 30px 40px nell'ordine: alto-sinistra, alto-destra, basso-destra, basso-sinistra. Abbreviazione — due o tre valori raggruppano gli angoli opposti.

Angoli ellittici

Gli angoli ellittici si creano specificando raggi diversi per orizzontale e verticale. border-radius: 50px / 25px separa i raggi orizzontali e verticali con uno slash. Questo crea curve asimmetriche, utili per forme organiche.

Privacy

Tutta la generazione avviene al 100% nel tuo browser. Nessun dato viene inviato a server.