Generatore Border Radius CSS — Strumento Online Gratuito

Cos'è Generatore Border Radius CSS?

Generatore border radius CSS online gratuito. Regola il raggio degli angoli con controlli visuali.

La proprietà CSS border-radius controlla l'arrotondamento degli angoli degli elementi, e la sua versatilità si estende ben oltre i semplici rettangoli arrotondati. Regolando ogni angolo in modo indipendente, puoi creare pillole, cerchi, forme asimmetriche e forme complesse dall'aspetto organico — tutto con una singola proprietà CSS. CSS Border Radius Generator fornisce un controllo a cursore individuale per tutti e quattro gli angoli con un'anteprima dal vivo che si aggiorna all'istante.

Ogni angolo — in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra — ha il proprio cursore, permettendoti di creare forme completamente asimmetriche. L'interruttore di unità tra pixel (px) e percentuale (%) cambia significativamente il comportamento. I valori in pixel creano angoli con raggio fisso che mantengono la stessa dimensione indipendentemente dalle dimensioni dell'elemento. I valori in percentuale legano il raggio alla dimensione dell'elemento, ed è così che crei cerchi perfetti (border-radius: 50% su un quadrato).

Quattro preimpostazioni coprono i casi d'uso più comuni. Circle crea border-radius: 50% per un cerchio perfetto (o un'ellisse su elementi non quadrati). Pill crea una forma con estremità completamente arrotondate (border-radius: 9999px), utile per badge di pulsanti e tag. Card applica un arrotondamento sottile di 8px adatto a componenti card e contenitori. Rounded applica un arrotondamento di 8px su tutti gli angoli, appropriato per pulsanti e campi di input.

Il codice CSS generato mostra la sintassi abbreviata. Se tutti e quattro gli angoli hanno lo stesso valore, produce un valore singolo (es. border-radius: 8px). Se gli angoli differiscono, produce la sintassi a quattro valori in ordine orario (in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra). Il codice è pronto per essere copiato nel tuo foglio di stile.

Casi d'uso reali per Generatore Border Radius CSS

Creazione di un pulsante arrotondato a forma di pillola

Il tuo design system usa pulsanti a forma di pillola con altezza di 24px ed estremità completamente arrotondate. Seleziona la preimpostazione "Pill" per border-radius: 9999px. L'anteprima del pulsante mostra la forma a pillola. Copia il CSS e applicalo al tuo componente pulsante. Regola i valori degli angoli singolarmente se vuoi un aspetto più morbido.

Progettazione di una forma asimmetrica per una sezione hero

Una hero di una landing page ha bisogno di una forma distintiva: in alto a sinistra a 0px, in alto a destra a 40px, in basso a destra a 0px, in basso a sinistra a 40px. Imposta ogni cursore dell'angolo in modo indipendente. L'anteprima mostra una forma asimmetrica unica. Il CSS generato è border-radius: 0 40px 0 40px.

Realizzazione di un avatar circolare con raggio percentuale

Un avatar utente è un'immagine quadrata di 64x64 pixel. Commuta l'unità su % e imposta tutti e quattro gli angoli al 50%. L'anteprima mostra un cerchio perfetto. Il CSS generato è border-radius: 50%, che funziona su qualsiasi elemento quadrato indipendentemente dalle dimensioni.

Perché usare Generatore Border Radius CSS?

4 preset: Cerchio, Pillola, Scheda, Arrotondato
CSS pulito pronto all'uso
Anteprima in tempo reale

Come usare Generatore Border Radius CSS — Guida passo passo

Regola i cursori per ogni angolo.

Scegli un preset: Cerchio, Pillola, Scheda o Arrotondato.

Copia il codice CSS generato.

A chi è rivolto Generatore Border Radius CSS?

design UI
schede
pulsanti

Consigli professionali per Generatore Border Radius CSS

1Usa valori in pixel per elementi a dimensione fissa (pulsanti, card) in cui il raggio degli angoli deve rimanere costante. Usa valori in percentuale per elementi responsive in cui il raggio deve adattarsi all'elemento.
2La preimpostazione "Pill" usa un valore in pixel molto grande (9999px) piuttosto che il 50% perché il 50% su un rettangolo crea un'ellisse, non una pillola. Il grande valore in pixel garantisce estremità completamente arrotondate su qualsiasi elemento rettangolare.
3Per un "squircle" (quadrato con angoli leggermente arrotondati, popolare in iOS), usa circa il 10-12% di border-radius su tutti gli angoli. Questo crea un aspetto più morbido rispetto a piccoli valori in pixel.
4Quando usi valori in percentuale, il raggio viene calcolato rispetto alla larghezza dell'elemento (per sinistra/destra) e all'altezza (per sopra/sotto). Percentuali diverse sugli angoli orizzontali rispetto a quelli verticali creano angoli ellittici.

Generatore Border Radius CSS — Domande frequenti

What is border-radius in CSS?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

How to make a circle with CSS?

Set border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Generatore Border Radius CSS really free to use?

Yes, Generatore Border Radius CSS is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Pronto a usare Generatore Border Radius CSS?

Strumento online gratuito — funziona nel browser, senza registrazione. Inizia subito.

Prova ora