border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Generatore online gratuito di raggio di bordo — Editor visivo CSS

Crea valori personalizzati di border-radius CSS in modo visivo. Progetta angoli arrotondati, pulsanti a pillola, blob organici e forme creative con anteprima live e output CSS istantaneo.

Cosa è un generatore di raggio di bordo?

Un generatore di raggio di bordo è uno strumento visivo che aiuta i progettisti web a creare valori CSS border-radius senza calcolare manualmente i valori in pixel o percentuali. Invece di digitare numeri e rinfrescare il browser, regoli i cursori e vedi la forma cambiare in tempo reale.

La proprietà CSS border-radius arrotonda gli angoli di un elemento. È una delle proprietà CSS più versatili — in grado di creare tutto, dalle semplici cornici arrotondate alle complesse forme organiche.

Come utilizzare questo generatore di raggio di bordo

1. Scegli un preset — Inizia con angoli arrotondati, pillole, blob, foglie, gocce o forme morfologiche.
2. Regola i cursori — Controlla ogni angolo separatamente o collegali insieme.
3. Imposta le dimensioni — Modifica larghezza e altezza per adattarti al tuo elemento.
4. Personalizza i colori — Imposta il colore della casella e lo sfondo dell'anteprima.
5. Copia il CSS — Fai clic sul pulsante di copia e incolla nel tuo foglio di stile.

Funzionalità principali

Funzione	Beneficio
Controllo individuale degli angoli	Imposta ogni angolo separatamente per forme uniche
Collega/Scolla gli angoli	Passa tra angoli uniformi e personalizzati
6 preset di forma	Parti velocemente con schemi comuni di border-radius
Controllo larghezza & altezza	Adatta alle dimensioni reali del tuo elemento
Anteprima live	Vedi la forma aggiornarsi istantaneamente mentre regoli
Copia negli appunti	Esporta CSS con un clic

Comprendere il raggio di bordo CSS

La sintassi

La proprietà border-radius accetta fino a quattro valori, uno per ogni angolo:

border-radius: top-left top-right bottom-right bottom-left;

Modello di valore	Angoli interessati
16px	Tutti e quattro gli angoli ugualmente
16px 8px	Top-left + bottom-right / top-right + bottom-left
16px 8px 4px	Top-left / top-right + bottom-left / bottom-right
16px 8px 4px 2px	Ogni angolo individualmente

Pixel vs Percentuali

• Pixel (px): Raggio di bordo fisso indipendentemente dalle dimensioni dell'elemento.
• Percentuali (%): Relative alle dimensioni dell'elemento. 50% su un quadrato crea un cerchio perfetto; 50% su un rettangolo crea un'ellisse.

Utilizzo delle percentuali per cerchi e pillole

Un border-radius: 50% crea un cerchio perfetto quando larghezza uguale altezza. Per pulsanti a pillola, usa un valore elevato in pixel (ad esempio 999px) — questo garantisce che il raggio superi sempre la metà della dimensione più corta, creando estremità completamente arrotondate indipendentemente dalle dimensioni dell'elemento.

Confronto dei preset di forma

Preset	Valori	Caso d'uso
Arrotondato	16px uniforme	Cartelle, modali, immagini
Pillole	999px uniforme	Pulsanti, tag, badge
Blob	60px 40px 70px 30px	Elementi decorativi, sezioni hero
Foglia	0 100px 0 100px	Elementi UI organici, separatori decorativi
Goccia	0 100px 100px 0	Suggerimenti, callout, puntatori
Morfologico	30px 70px 50px 80px	Forme astratte, background

Caso d'uso reale

Stile dei pulsanti

Crea pulsanti a pillola con border-radius: 999px per un aspetto moderno e amichevole utilizzato da quasi tutti i sistemi di design.

Componenti cartella

Un arrotondamento sottile (8–16px) smorza gli angoli delle cartelle e crea una gerarchia visiva senza distrazione.

Avatar profilo

Utilizza border-radius: 50% su immagini quadrate per creare avatar circolari, comuni in app social e dashboard.

Blob decorativi

Valori asimmetrici su grandi elementi di sfondo creano forme organiche popolari nel design web moderno.

Suggerimenti personalizzati

Utilizza valori misti (ad esempio 8px 8px 8px 0) per creare un suggerimento con un angolo appuntito che punta all'elemento attivatore.

Consigli per un migliore raggio di bordo

Consiglio	Spiegazione
Mantieni la coerenza	Utilizza lo stesso raggio in tutto il sistema di design (es. 8px per piccoli, 16px per grandi).
Usa unità relative	Per cerchi reattivi, usa 50% invece di un valore fisso in pixel.
Valori elevati per le pillole	Usa 9999px o 999px per garantire estremità completamente arrotondate su qualsiasi elemento.
Scollega per forme organiche	Angoli asimmetrici creano forme interessanti e uniche.
Presta attenzione al contenuto	Assicurati che testo e contenuti interni non siano tagliati da un arrotondamento aggressivo.
Combina con trasformazioni	Ruota o inclina elementi con radii personalizzati per forme creative ancora più interessanti.

Domande frequenti

Cosa succede quando border-radius è più grande dell'elemento?

Il browser limita il valore alla metà della dimensione più corta. Quindi un border-radius: 999px su un pulsante alto 60px diventa effettivamente 30px, creando una forma a pillola perfetta.

Posso utilizzare diversi raggi orizzontali e verticali?

Sì. La sintassi abbreviata border-radius supporta un'alternativa: border-radius: 50px / 25px imposta i raggi orizzontali e verticali separatamente, creando angoli ellittici. Questo generatore si concentra sui raggi uniformi per ciascun angolo.

Come creo un cerchio?

Imposta border-radius: 50% su un elemento quadrato (larghezza uguale altezza). Se l'elemento è rettangolare, 50% crea un'ellisse.

Posso utilizzare questo generatore per SVG?

Sì, ma i valori di raggio saranno applicati come bordi esterni. Per bordi interni, utilizza il parametro inner in SVG.