CodeKitHubChe cos'è questo strumento?
border-radius è la proprietà CSS che arrotonda gli angoli di un elemento. Se scritta manualmente, richiede quattro valori in un ordine prestabilito — in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra — che è facile invertire, soprattutto quando i quattro angoli sono diversi tra loro.
Questo strumento elimina ogni incertezza: basta spostare un cursore, osservare l'arrotondamento dell'angolo nell'anteprima in tempo reale e leggere il codice CSS esatto nella casella del codice generato. Un unico pulsante a levetta consente di passare da un raggio uniforme (tutti e quattro gli angoli uguali, il caso più comune) a quattro cursori indipendenti per forme organiche e asimmetriche.
Perché usarlo?
- L'anteprima in tempo reale si aggiorna istantaneamente mentre trascini: non è necessario modificare i CSS né ricaricare la pagina per vedere il risultato.
- Blocco con un clic per il caso più comune in cui “ogni angolo ha lo stesso raggio”; sblocco per pulsanti a forma di pillola, fumetti e forme a goccia.
- Visualizza la forma abbreviata a valore singolo quando tutti gli angoli corrispondono, oppure la forma completa a quattro valori quando non corrispondono — in entrambi i casi è pronta per essere copiata e incollata.
- Funziona interamente nel browser. Nessuna delle informazioni inserite viene inviata altrove.
- Gratuito, senza registrazione, funziona su dispositivi mobili.
Come si usa
- Lascia selezionata l'opzione "Blocca tutti gli angoli" e trascina uno qualsiasi dei cursori per impostare un raggio uniforme per l'intero riquadro.
- Deseleziona il lucchetto per controllare ogni angolo in modo indipendente: utile per forme a pillola, a goccia e carte asimmetriche.
- Guarda l'anteprima aggiornarsi in tempo reale mentre regoli ciascun cursore.
- Copia il codice CSS generato dalla casella di codice e incollalo nel tuo foglio di stile.
Esempio
Input
Top-left: 40px, Top-right: 8px, Bottom-right: 40px, Bottom-left: 8pxRisultato
border-radius: 40px 8px 40px 8px;Angoli opposti non allineati come questi creano la sagoma di una foglia o di un petalo — un effetto molto diffuso nel design di biglietti e distintivi.
px o % — quale unità dovrei usare?
Questo generatore produce valori in pixel, che rappresentano l'impostazione predefinita più adatta per la maggior parte degli elementi dell'interfaccia utente: pulsanti, schede e campi di immissione in cui si desidera un raggio degli angoli fisso e prevedibile, indipendentemente dalle dimensioni dell'elemento.
Le percentuali si comportano in modo diverso: sono relative alla larghezza e all’altezza dell’elemento stesso, quindi un raggio del 50% su un elemento quadrato produce un cerchio perfetto, mentre su un elemento non quadrato produce un’ellisse. Se desideri ottenere quell'effetto (avatar, forme irregolari che si ridimensionano in base al contenitore), prendi il codice CSS generato e sostituisci manualmente i valori in px con un valore in %: ad esempio, border-radius: 50% trasforma qualsiasi riquadro quadrato in un cerchio.
Modelli comuni di border-radius
- Scheda arrotondata: tutti gli angoli sono uguali, circa 8–16 px per i componenti dell'interfaccia utente.
- Pulsante "Pill": imposta il raggio a metà dell'altezza dell'elemento (oppure usa semplicemente 9999px, che garantisce la forma completa del pulsante "Pill" indipendentemente dall'altezza).
- Avatar circolare: border-radius: 50% su un elemento quadrato (con larghezza e altezza uguali).
- Fumetto: tre angoli arrotondati, un angolo appuntito — imposta tre cursori su “alto” e uno su 0.
- Forma delle foglie/dei petali: gli angoli opposti sono uguali, mentre quelli adiacenti sono diversi — ad esempio, quello in alto a sinistra e quello in basso a destra sono entrambi grandi, mentre quello in alto a destra e quello in basso a sinistra sono entrambi piccoli.
Abbinamento con un’ombra
Gli angoli arrotondati raramente compaiono da soli: anche le schede e i pulsanti di solito necessitano di un po’ di ombra per dare profondità. Usa il Box Shadow Generator per impostare un’ombra e applica entrambi i frammenti di codice CSS generati allo stesso elemento.
→ Generatore di ombreggiatura dei riquadri · Convertitore di unità
Domande frequenti
Qual è la differenza tra `border-radius` e l'ordine degli angoli?
La sintassi abbreviata CSS segue sempre l'ordine top-left, top-right, bottom-right, bottom-left, in senso orario partendo dall'angolo in alto a sinistra. I quattro cursori di questo strumento sono etichettati in modo corrispondente, così non dovrai mai ricordarti l'ordine da solo.
Posso usare unità di misura diverse per ogni angolo?
Sì, nei CSS veri e propri è possibile combinare px, %, em e rem negli angoli, anche se nella pratica è piuttosto raro. Questo strumento genera valori in px uniformi per semplicità: se hai bisogno di unità miste, sostituisci qualsiasi singolo valore con % o un'altra unità direttamente nel tuo foglio di stile.
Perché a volte l'impostazione `border-radius: 50%` crea un ovale invece di un cerchio?
Questo perché le percentuali sono relative a ciascun asse in modo indipendente: il raggio orizzontale è una percentuale della larghezza dell'elemento, mentre il raggio verticale è una percentuale della sua altezza. Su un elemento quadrato (con larghezza e altezza uguali) si ottiene un cerchio perfetto; su un rettangolo si ottiene un'ellisse.
La proprietà `border-radius` funziona anche sulle immagini di sfondo e sui bordi?
Sì — la proprietà `border-radius` ritaglia lo sfondo, il bordo e (nei browser moderni) l'ombra (`box-shadow`) dell'elemento in base alla forma arrotondata. Non ritaglia il contenuto dei figli che fuoriesce, a meno che non si imposti anche `overflow: hidden` sull'elemento padre.
C'è un limite alla dimensione massima del raggio?
Non esiste un limite rigido: se il raggio supera la metà della larghezza o dell'altezza dell'elemento, i browser lo limitano in modo che le due curve su quel lato si incontrino esattamente al centro; è così che un quadrato diventa un cerchio perfetto o assume la forma di una pillola.