Più di semplici angoli arrotondati
border-radius è una delle proprietà CSS più usate: arrotonda gli angoli di pulsanti, card, immagini e avatar. Nella forma più semplice basta un valore, ma la proprietà può fare molto di più: ogni angolo può avere un raggio diverso e ogni raggio può essere ellittico, con una misura orizzontale e una verticale distinte.
Questo generatore ti fa lavorare con i quattro angoli collegati, per un arrotondamento uniforme, oppure separati, per regolarli uno per uno. Puoi usare pixel o percentuali: i pixel danno un raggio fisso, le percentuali si adattano alle dimensioni dell’elemento. Attivando gli angoli ellittici, ogni angolo riceve un raggio orizzontale e uno verticale, cioè la sintassi a otto valori con la barra.
Ci sono preset per le forme più richieste: la pillola, per pulsanti e badge; il cerchio, per avatar e icone; e le forme blob organiche, molto usate come sfondi decorativi o maschere per le immagini. L’anteprima si aggiorna a ogni modifica.
Un dettaglio utile nel design: quando annidi un elemento arrotondato dentro un altro, il raggio interno dovrebbe essere uguale al raggio esterno meno lo spazio tra i due. Così le curve restano parallele e l’insieme appare più curato, per esempio in una card con un’immagine e un padding.
Il generatore scrive la forma più corta possibile della proprietà: un solo valore quando gli angoli sono uguali, due o tre quando si ripetono, la sintassi completa solo quando serve. Tutto avviene nel tuo browser ed è gratuito, senza limiti.
Come creare un border-radius
- Parti da un preset (pillola, cerchio, blob) o da un box squadrato.
- Scegli l’unità: px o %.
- Regola i quattro angoli insieme, oppure scollegali per impostarli uno per uno.
- Attiva gli angoli ellittici per impostare raggio orizzontale e verticale separati.
- Copia il CSS border-radius generato.
Dove usare border-radius
- Pulsanti a pillola e badge.
- Avatar e immagini circolari.
- Card e pannelli con angoli morbidi.
- Forme blob decorative come sfondi o maschere per foto.
- Fumetti di chat con un angolo diverso dagli altri.
- Schede e tab arrotondate solo in alto.
Come leggere la sintassi di border-radius
- Un valore (12px): tutti gli angoli uguali.
- Due valori (12px 4px): alto-sinistra e basso-destra, poi alto-destra e basso-sinistra.
- Quattro valori: alto-sinistra, alto-destra, basso-destra, basso-sinistra, in senso orario.
- Con la barra (30% 70% 70% 30% / 30% 30% 70% 70%): prima i raggi orizzontali, dopo la barra quelli verticali. È così che nascono le forme blob.
- 50% su un quadrato dà un cerchio; un valore molto grande (9999px) su un rettangolo dà una pillola.
Domande Frequenti
È gratis?
Sì. Il generatore di border-radius è gratuito e senza limiti: anteprima dal vivo e copia del CSS quante volte vuoi.
Meglio px o %?
I px danno lo stesso raggio a qualsiasi dimensione; le % sono relative alla larghezza e all’altezza dell’elemento, utili per cerchi e forme che si adattano.
Come si crea una forma blob?
Usa il preset blob o attiva gli angoli ellittici e assegna raggi orizzontali e verticali diversi a ogni angolo.
Come faccio un cerchio?
Applica border-radius: 50% a un elemento con larghezza e altezza uguali, oppure usa il preset cerchio.