Generatore di border-radius CSS

Regola tutti gli otto valori d'angolo di border-radius, inclusi i raggi orizzontale e verticale ellittici, guarda un'anteprima live del riquadro e copia il CSS abbreviato.

Caricamento strumento…

Generatore di border-radius CSS — Regola ogni angolo di un riquadro in modo indipendente — in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra — con raggi orizzontale e verticale separati per vere curve ellittiche, e guarda l'anteprima live aggiornarsi mentre il CSS abbreviato di border-radius viene generato per te. Tutto gira localmente nel tuo browser, quindi nessun valore lascia il tuo dispositivo. Copia il risultato e incollalo direttamente nel tuo foglio di stile.

Cos'è Generatore di border-radius CSS?

Il generatore di border-radius CSS è un editor visivo gratuito per la proprietà CSS border-radius, pensato per sviluppatori front-end e designer. Usa i cursori e i campi numerici per impostare il raggio orizzontale e verticale di ogni angolo in pixel, scegli un'unità e attiva la modalità ellittica per ottenere la sintassi con barra degli angoli ovali. Un riquadro di anteprima mostra la forma arrotondata in tempo reale e la dichiarazione abbreviata e compatta viene generata per essere copiata. Scegli un preset come Arrotondato, Pillola, Cerchio o un Blob organico dal controllo segmentato per partire in fretta, poi rifinisci ogni angolo. Usalo per disegnare schede morbide, pulsanti a pillola, cerchi perfetti, squircle e forme decorative a goccia senza memorizzare l'ordine degli angoli.

Come usare Generatore di border-radius CSS

  1. Scegli un preset (Arrotondato, Pillola, Cerchio o Blob) dal controllo segmentato per caricare una forma di partenza.
  2. Trascina il cursore di ogni angolo o digita un numero per impostarne il raggio orizzontale.
  3. Attiva Ellittico per rivelare un secondo raggio verticale per angolo e produrre angoli ovali con la sintassi a barra.
  4. Scegli l'unità (px o %) nelle impostazioni; le percentuali scalano il raggio con la dimensione del riquadro.
  5. Guarda l'anteprima live aggiornarsi, poi copia il border-radius abbreviato generato nel tuo foglio di stile.

Esempi

Angoli morbidi della scheda

Input

Tutti e quattro gli angoli 16, ellittico disattivato

Output

border-radius: 16px;

Pulsante a pillola

Input

Preset Pillola, tutti gli angoli 9999

Output

border-radius: 9999px;

Angoli ellittici misti

Input

AS 40/20, AD 10, BD 40/20, BS 10, ellittico attivato

Output

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Domande frequenti

In che ordine sono i quattro angoli?
La forma abbreviata elenca gli angoli in senso orario partendo da quello in alto a sinistra: alto sinistra, alto destra, basso destra, basso sinistra. Questo strumento scrive sempre i quattro valori in quest'ordine, così il risultato è inequivocabile e facile da ritoccare a mano in seguito.
Cosa fa la modalità ellittica?
Border-radius può prendere un raggio orizzontale e uno verticale per angolo, separati da una barra, per disegnare angoli ovali (ellittici) anziché circolari. Attiva Ellittico per impostare un secondo raggio verticale su ogni angolo; l'output usa allora la sintassi a barra 'orizzontale / verticale'.
Devo usare px o percentuale?
I pixel danno una dimensione d'angolo fissa, indipendente dal riquadro. Le percentuali sono relative alla larghezza e all'altezza del riquadro, quindi 50% su ogni angolo trasforma un quadrato in un cerchio perfetto e l'arrotondamento scala al ridimensionarsi dell'elemento. Cambia l'unità nelle impostazioni.
Come faccio un cerchio perfetto o una pillola?
Scegli il preset Cerchio (50% su ogni angolo) per un cerchio da un quadrato, oppure il preset Pillola (un raggio in pixel molto grande) così i lati corti diventano semicerchi completi. Puoi anche partire da un preset e rifinire singoli angoli.
I miei dati vengono caricati da qualche parte?
No. Il generatore gira interamente nel tuo browser con JavaScript — i valori del raggio non vengono mai inviati a un server, quindi funziona in privato e persino offline una volta caricata la pagina.

Strumenti correlati

Codice in immagine

Trasforma uno snippet di codice in un'elegante immagine PNG con evidenziazione della sintassi nel tuo browser, con tema, sfondo a gradiente o trasparente e spaziatura interna — senza alcun caricamento.

Verificatore di contrasto dei colori

Controlla il rapporto di contrasto WCAG tra un colore HEX di primo piano e uno di sfondo e verifica se supera AA e AAA per testo normale e grande.

Miscelatore di colori

Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.

Generatore di sfumature di colore

Trasforma un colore HEX di base in una scala di sfumature 50-950 in stile Tailwind, miscelando verso il bianco e il nero, ogni livello con campione e HEX copiabile.