Border Radius Generator

Informazioni su questo strumento

La proprietà border-radius arrotonda gli angoli di un elemento. Quando tutti e quattro i valori sono uguali, si usa una forma abbreviata con un singolo valore. Valori diversi creano forme asimmetriche — la pillola usa 50% su tutti gli angoli, la foglia alterna 0% e 50%.

Clicca su qualsiasi numero di angolo per digitare direttamente un valore, o trascina il cursore collegato per cambiare tutti e quattro gli angoli contemporaneamente. Disattiva Blocca tutti gli angoli per controllare ogni angolo indipendentemente.

Come usare

1. Inserisci valori nei quattro campi angolo (alto-sinistra, alto-destra, basso-sinistra, basso-destra).
2. Attiva Blocca tutti gli angoli per impostare tutti e quattro i valori contemporaneamente con il cursore.
3. Passa tra unità px e % in base alle esigenze di design.
4. Clicca su un preset (Pillola, Foglia, Blob, ecc.) per applicare immediatamente una forma predefinita.

Casi d'uso

I designer UI usano border-radius per creare pulsanti, card e forme avatar. Gli sviluppatori regolano gli angoli arrotondati per adattarli ai sistemi di design del brand. La forma pillola (50%) è comunemente usata per tag e badge. I valori asimmetrici creano forme organiche di foglia o blob per elementi decorativi.

Domande frequenti

• Qual è la differenza tra px e %? — px dà un raggio fisso indipendentemente dalla dimensione dell'elemento. % è relativo alla larghezza e altezza dell'elemento — 50% su tutti gli angoli crea un cerchio perfetto (se l'elemento è quadrato).
• Posso impostare raggi diversi per ogni angolo? — Sì. Deseleziona Blocca tutti gli angoli e digita valori diversi in ogni campo angolo.
• Cosa significa l'output abbreviato? — Quando tutti e quattro gli angoli sono uguali, l'output è un singolo valore. Quando differiscono, l'ordine CSS è: alto-sinistra, alto-destra, basso-destra, basso-sinistra.