Generatore di Border Radius CSS — Angoli Arrotondati Visivi
Genera il border-radius CSS visivamente. Controlla ogni angolo indipendentemente, cambia px o %, vedi un'anteprima dal vivo e copia il codice. 100% nel tuo browser.
Generatore di Border Radius CSS — Progetta Angoli Arrotondati Visivamente
Crea il border-radius perfetto con un editor visivo. Regola ogni angolo indipendentemente o collegali tutti insieme, cambia tra pixel e percentuali, guarda l’anteprima dal vivo e copia il CSS pronto all’uso. Niente più tentativi ed errori.
Funzionalità
- Angoli indipendenti: imposta in-alto-sinistra, in-alto-destra, in-basso-destra e in-basso-sinistra separatamente
- Modalità collegata: cambia tutti e quattro gli angoli insieme con un solo cursore
- px o %: cambia unità — le percentuali creano curve ellittiche morbide
- Anteprima dal vivo: vedi la forma aggiornarsi all’istante su un elemento di esempio
- Output CSS pulito: copia una singola proprietà pronta da incollare
Capire border-radius
La scorciatoia border-radius accetta fino a quattro valori, applicati in senso orario partendo dall’angolo in-alto-sinistra: in-alto-sinistra in-alto-destra in-basso-destra in-basso-sinistra. Un valore di 0 significa un angolo netto; valori più alti producono angoli più arrotondati.
px vs % — qual è la differenza?
- Pixel (px): un raggio fisso indipendentemente dalla dimensione dell’elemento — prevedibile e coerente
- Percentuale (%): relativa alle dimensioni dell’elemento. Impostare tutti gli angoli al 50% su un quadrato lo trasforma in un cerchio perfetto
Forme comuni
- Scheda arrotondata: 8–16px su tutti gli angoli
- Pillola / pulsante: un valore px grande come 999px
- Cerchio: 50% su tutti gli angoli (su un elemento quadrato)
- Fumetto: arrotonda tre angoli, lasciane uno netto
Privacy
Questo strumento funziona interamente nel tuo browser. Niente viene caricato o memorizzato.