Generatore di Border Radius
Il generatore di border-radius CSS imposta ogni angolo del border-radius di un elemento in percentuale con slider separati o un unico slider All Corners, più preset come cerchio, foglia e blob, e copia il CSS.
Informazioni su questo strumento
Il generatore di border-radius CSS imposta ogni angolo del border-radius di un elemento in percentuale con slider separati o un unico slider All Corners, più preset come cerchio, foglia e blob, e copia il CSS.
Come si usa
- Trascina gli slider di ciascun angolo, oppure usa All Corners.
- Prova un preset come Circle, Leaf o Blob.
- Se serve, cambia la dimensione dell'anteprima.
- Clicca Copy CSS.
Da sapere
- border-radius accetta fino a quattro valori nell'ordine: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.
- border-radius: 50% su un elemento quadrato crea un cerchio.
- I raggi in percentuale si adattano alle dimensioni dell'elemento; quelli in pixel restano fissi.
- Raggi diversi sugli angoli opposti creano forme a foglia e blob senza alcun SVG.
- border-radius è supportato da tutti i browser attuali senza prefissi.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come creo angoli arrotondati in CSS?
Imposta border-radius, per esempio border-radius: 12px; per tutti gli angoli, oppure quattro valori per i singoli angoli.
Come creo un cerchio con il CSS?
Dai all'elemento larghezza e altezza uguali e border-radius: 50%.
In che ordine vanno i quattro valori di border-radius?
In alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra: in senso orario a partire dall'angolo in alto a sinistra.
Per border-radius meglio px o %?
Usa px per angoli di dimensione costante su pulsanti e card; usa % per forme come cerchi e blob che si adattano all'elemento.