Generatore di raggio del bordo CSS

Corner Radii

Top Left

12px

Top Right

12px

Bottom Right

12px

Bottom Left

12px

Presets

Lock corners together

Preview

Preview Box

CSS Code

border-radius: 12px 12px 12px 12px;

consente agli utenti di impostare visivamente gli angoli arrotondati per qualsiasi elemento HTML e genera istantaneamente il codice della proprietà CSS `border-radius` — senza bisogno di scrittura manuale.

Cos'è CSS Border Radius?

Spiega la proprietà CSS `border-radius`: cosa fa (arrotonda gli angoli del bordo esterno di un elemento), i quattro angoli individuali (in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra) e come i valori possono essere espressi in `px`, `%`, `em` o `rem`. Menziona che tutti e quattro possono essere impostati indipendentemente per design asimmetrici.

Come Usare il Generatore CSS Border Radius

Una semplice sezione passo-passo:

Trascina i cursori per impostare il valore del raggio per ogni angolo (In alto a sinistra, In alto a destra, In basso a destra, In basso a sinistra).
Abilita Blocca Angoli Insieme per applicare un raggio uniforme a tutti e quattro gli angoli contemporaneamente.
Usa i pulsanti preimpostati per forme comuni istantanee: quadrato affilato, rettangolo arrotondato, cerchio completo/pillola o curva diagonale.
Guarda la casella di anteprima aggiornarsi in tempo reale.
Copia il codice CSS generato con un clic.

Spiegazione dei Preset Border Radius

Copri i quattro preset integrati e i loro casi d'uso:

Affilato (0px) – per schede UI piatte e moderne e celle di tabella.
Arrotondato (8px) – la convenzione UI più comune; usato in pulsanti, schede, modali.
Pillola / Cerchio (999px) – per badge, tag, immagini avatar e pulsanti CTA.
Diagonale (999px / 0px alternati) – per elementi di design asimmetrici creativi popolari nelle landing page.

Blocca Angoli vs. Controllo Angoli Individuali

Spiega la differenza tra border-radius uniforme (es. `border-radius: 12px`) e la scorciatoia a quattro valori (es. `border-radius: 12px 0px 12px 0px`). Descrivi quando usare la modalità bloccata (pulsanti, schede) vs. la modalità individuale (fumetti, blob organici, forme UI personalizzate).

Comprendere l'Output CSS

Analizza il codice generato:

css

border-radius: 12px 12px 12px 12px;

Spiega l'ordine: in alto a sinistra → in alto a destra → in basso a destra → in basso a sinistra (in senso orario partendo dall'alto a sinistra). Nota le regole di abbreviazione: se tutti e quattro i valori sono identici, un singolo valore è sufficiente (border-radius: 12px).

Casi d'uso comuni per CSS Border Radius

Copre applicazioni pratiche del mondo reale:

Pulsanti – una leggera arrotondatura (6–8px) migliora la percezione di cliccabilità.
Schede e contenitori – 12–16px è lo standard del settore per le UI SaaS.
Immagini avatar/profilo – 50% o 999px per ritagli circolari.
Campi di input – arrotondatura sottile (4–8px) per un design moderno dei moduli.
Sezioni hero e banner – raggi asimmetrici per la differenziazione visiva.
Tooltip e riquadri di richiamo – un angolo acuto che punta all'elemento trigger.
Badge e tag – forma a pillola (999px) per etichette, categorie e indicatori di stato.

CSS Border Radius e compatibilità con i browser

Nota che border-radius è supportato in tutti i browser moderni (Chrome, Firefox, Safari, Edge) senza prefissi del fornitore. Menziona che i progetti più vecchi che richiedono il supporto di IE8 potrebbero aver bisogno dei prefissi -webkit-border-radius e -moz-border-radius, sebbene questi siano obsoleti nello sviluppo attuale.

Consigli per l'utilizzo di Border Radius nel web design

Usa raggi coerenti in tutto il tuo sistema di design (ad esempio, 8px per gli input, 12px per le schede, 999px per le pillole).
Evita di mescolare troppi raggi diversi su una singola pagina — crea incoerenza visiva.
Per UI scalabili, preferisci i valori rem o em in modo che gli angoli si adattino alla dimensione del carattere dell'utente.
Combina border-radius con overflow: hidden quando ritagli elementi figli (ad esempio, schede immagine arrotondate).
Usa grandi valori asimmetrici per creare forme a "blob organico", popolari nelle moderne grafiche hero delle landing page.

Domande frequenti

Cos'è un generatore di raggio del bordo CSS?

Un generatore di raggio del bordo CSS è uno strumento online gratuito che ti consente di regolare visivamente l'arrotondamento degli angoli degli elementi HTML e di ottenere istantaneamente il codice CSS border-radius corretto, eliminando la necessità di scrivere o indovinare i valori manualmente.

Come si genera un raggio del bordo CSS per un cerchio?

Imposta tutti e quattro i valori degli angoli a 999px (o 50% se l'elemento è un quadrato perfetto). Il generatore di raggio del bordo CSS fornisce un preset con un clic per questa forma.

Posso impostare valori di raggio del bordo diversi per ogni angolo?

Sì. Deseleziona l'opzione "Blocca gli angoli insieme" nel generatore, quindi trascina ciascuno dei quattro cursori indipendentemente per impostare valori personalizzati per in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra.

Quali unità posso usare per il raggio del bordo CSS?

La proprietà border-radius accetta px, %, em, rem e vw/vh. I più comuni in pratica sono px per le UI fisse e % per le forme fluide o circolari. Questo generatore produce valori in px per la precisione.

Qual è la scorciatoia CSS per il raggio del bordo?

La scorciatoia border-radius: TL TR BR BL imposta tutti e quattro gli angoli in senso orario partendo dall'alto a sinistra. Se tutti e quattro i valori sono uguali, puoi scrivere un singolo valore: border-radius: 12px.

Il generatore di raggio del bordo CSS è gratuito?

Sì, lo strumento è completamente gratuito. Non è richiesto alcun account o registrazione. Basta regolare i cursori, visualizzare in anteprima il risultato e copiare il codice generato.

Il border-radius funziona sulle immagini?

Sì. L'applicazione di border-radius a un tag arrotonda i suoi angoli visibili. Per assicurarsi che anche il contenuto figlio (come un'immagine all'interno di un

) venga ritagliato, aggiungi overflow: hidden al contenitore padre.

Qual è la differenza tra border-radius e -webkit-border-radius?

-webkit-border-radius era un vecchio prefisso del fornitore richiesto per Safari e Chrome prima che adottassero la proprietà standard border-radius. I browser moderni non ne hanno più bisogno e puoi tranquillamente usare border-radius senza alcun prefisso.

Come si crea un pulsante a forma di pillola usando il raggio del bordo CSS?

Imposta border-radius su un valore grande come 999px. Questo forza estremità sinistre e destre completamente arrotondate indipendentemente dalla larghezza del pulsante, creando la classica forma a pillola utilizzata nel design moderno dell'interfaccia utente.

Posso usare il raggio del bordo CSS per creare forme asimmetriche?

Sì. Impostando valori diversi per ogni angolo — ad esempio, border-radius: 999px 0 999px 0 — puoi creare forme diagonali, ondulate o organiche. I cursori degli angoli individuali del generatore rendono facile sperimentare visivamente prima di copiare il codice.