Generatore di border-radius CSS
Regola l’arrotondamento di ogni angolo con i cursori e guarda il risultato in tempo reale. Usa un solo raggio, uno per angolo o raggi ellittici per forme organiche, in px, % o rem. Copia il CSS quando ti piace.
Elaborato al 100% nel tuo browser
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Scegli la modalità: tutti uguali, per angolo o ellittico.
- 2Muovi i cursori e cambia l’unità se serve.
- 3Prova le forme rapide come pillola, cerchio o foglia.
- 4Copia il CSS generato e incollalo nel tuo foglio di stile.
Casi d’uso
- Arrotondare card, pulsanti e immagini di un’interfaccia.
- Creare forme a goccia o organiche per sfondi e avatar.
- Fare un cerchio perfetto o un pulsante a forma di pillola.
- Capire come funziona la sintassi con la barra di border-radius.
Domande frequenti
Come faccio un cerchio con border-radius?
Usa 50% su un box quadrato. Su un box rettangolare ottieni un’ellisse; per una pillola usa un raggio molto grande, come 999px.
Cosa significa la barra in 50% / 30%?
Separa i raggi orizzontali da quelli verticali. Così ogni angolo può essere un’ellisse invece di un quarto di cerchio, il che permette forme organiche.
In che ordine sono i valori?
Partono dall’alto a sinistra e seguono il senso orario: alto sinistra, alto destra, basso destra e basso sinistra.
È meglio usare px, % o rem?
I px danno un arrotondamento fisso, il % si adatta alla dimensione del box (utile per cerchi e gocce) e i rem scalano con la dimensione del carattere della pagina.