Generatore di Border Radius
Genera valori CSS border-radius visivamente. Controlla ogni angolo indipendentemente e copia il codice CSS.
Funzionalita principali
- Controllo del raggio di ogni singolo angolo
- Collega/scollega gli angoli per valori uniformi
- Forme preimpostate (pillola, cerchio, foglia, biglietto)
- Copia del codice CSS con un clic
Guide
La proprietà CSS border-radius controlla l'arrotondamento degli angoli degli elementi. Nella sua forma più semplice, border-radius: 8px arrotonda tutti e quattro gli angoli di 8 pixel. Nella sua forma più complessa, border-radius accetta otto valori (quattro raggi orizzontali e quattro raggi verticali separati da una barra) per creare angoli asimmetrici ed ellittici che producono forme organiche e non circolari. Questa guida illustra ogni aspetto di border-radius: sintassi, effetti visivi, pattern comuni, considerazioni sulle prestazioni e applicazioni di design. La sintassi di base prende da uno a quattro valori che rappresentano il raggio del cerchio di ciascun angolo. Un valore si applica a tutti e quattro gli angoli: border-radius: 10px. Due valori impostano in alto-a-sinistra/in basso-a-destra e in alto-a-destra/in basso-a-sinistra: border-radius: 10px 20px. Tre valori impostano in alto-a-sinistra, in alto-a-destra/in basso-a-sinistra e in basso-a-destra: border-radius: 10px 20px 30px. Quattro valori impostano ciascun angolo individualmente in senso orario partendo dall'alto-a-sinistra: border-radius: 10px 20px 30px 40px. Puoi anche mirare a singoli angoli con proprietà estese: border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. I valori percentuali creano effetti che scalano con l'elemento. border-radius: 50% su un elemento quadrato produce un cerchio perfetto. Su un elemento rettangolare, il 50% produce un'ellisse. Questo perché i valori percentuali sono relativi alle dimensioni dell'elemento: i raggi orizzontali sono percentuali della larghezza, i raggi verticali sono percentuali dell'altezza. Un elemento 200x100 px con border-radius: 50% ha angoli con raggio orizzontale 100 px e raggio verticale 50 px, creando un'ellisse anziché un cerchio. Questa relazione dimensionale è importante da comprendere quando si lavora con layout responsive in cui le proporzioni degli elementi cambiano a diverse dimensioni di viewport. La sintassi con barra abilita angoli ellittici in cui i raggi orizzontali e verticali differiscono. border-radius: 50px / 25px crea angoli che curvano più orizzontalmente che verticalmente, producendo un effetto ovale allungato. La sintassi completa a otto valori è: border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v, dove h è il raggio orizzontale e v è il raggio verticale. Questo livello di controllo ti permette di creare forme organiche e blob che sarebbe difficile ottenere altrimenti. Un valore come border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produce una forma asimmetrica e dall'aspetto naturale spesso usata nel web design moderno per blob decorativi, sfondi di avatar e divisori di sezione. Comprendere la geometria alla base di border-radius aiuta a prevedere i risultati visivi. Ciascun angolo dell'elemento riceve un'ellisse (o un cerchio se entrambi i raggi sono uguali) inserita in esso. Il bordo, lo sfondo e il contenuto sono tutti ritagliati a questo rettangolo arrotondato. L'ellisse per ciascun angolo è definita dal suo raggio orizzontale (che si estende lungo il bordo superiore o inferiore) e dal suo raggio verticale (che si estende lungo il bordo sinistro o destro). Quando entrambi i raggi sono uguali, l'angolo è un arco circolare. Quando differiscono, l'angolo è un arco ellittico. Visualizzare questa ellisse ti aiuta a capire perché certe combinazioni di valori producono forme impreviste. Creare un cerchio perfetto richiede due condizioni: l'elemento deve essere quadrato (larghezza e altezza uguali) e border-radius deve essere 50% o un valore uguale a metà della dimensione dell'elemento. Se l'elemento non è quadrato, border-radius: 50% crea un'ellisse. Per le immagini di profilo e gli avatar, assicurati che il contenitore sia quadrato usando valori uguali di larghezza e altezza, oppure usa aspect-ratio: 1 nel CSS, poi applica border-radius: 50%. Overflow: hidden sul contenitore ritaglia l'immagine alla forma circolare. Un'alternativa è usare clip-path: circle(50%) che produce lo stesso risultato visivo. Le forme a pillola (forme stadio) sono rettangoli con lati corti completamente arrotondati. Applica border-radius con un valore uguale o maggiore di metà dell'altezza dell'elemento. Per un pulsante alto 40 px, border-radius: 20px arrotonda le estremità in semicerchi. Usare un valore molto grande come border-radius: 9999px garantisce una forma a pillola indipendentemente dall'altezza dell'elemento, perché il browser limita il raggio a metà della dimensione più piccola. Questa tecnica è comune per tag, badge, pulsanti e campi di input nel design UI moderno. La forma a pillola è diventata lo stile predefinito dei pulsanti in molti sistemi di design inclusi gli Human Interface Guidelines di Apple. Border-radius interagisce con diverse altre proprietà CSS in modi che influenzano il risultato renderizzato. Il bordo stesso è influenzato: la linea del bordo segue l'angolo arrotondato, mantenendo la sua larghezza lungo tutta la curva. L'outline non segue border-radius nella maggior parte dei browser, renderizzandosi come un rettangolo anche quando l'elemento ha angoli arrotondati (sebbene Firefox e le versioni più recenti di Chromium supportino ora outline arrotondati). Box-shadow segue border-radius, proiettando ombre arrotondate che corrispondono alla forma dell'elemento. Overflow: hidden ritaglia il contenuto figlio alla forma arrotondata, il che è essenziale per le immagini dentro contenitori arrotondati. Background-clip determina se lo sfondo si estende sotto il bordo nell'area arrotondata. L'algoritmo di rendering di border-radius risolve i conflitti quando la somma dei raggi adiacenti supera lo spazio disponibile. Se imposti border-top-left-radius: 100px e border-top-right-radius: 100px su un elemento largo solo 150 px, i due raggi sommano 200 px ma solo 150 px sono disponibili. Il browser riduce proporzionalmente entrambi i raggi per adattarli. Nello specifico, calcola un fattore di scala (150/200 = 0,75) e lo applica a entrambi i raggi, risultando in 75 px ciascuno. Questo adeguamento automatico significa che puoi usare valori di raggio grandi senza preoccuparti dell'overflow, sebbene il risultato visivo possa differire dalla tua intenzione. L'algoritmo considera tutti e quattro gli angoli simultaneamente, trovando il più piccolo fattore di scala necessario. Border-radius annidato richiede che gli elementi interni abbiano raggi più piccoli dei loro genitori per mantenere una spaziatura visiva coerente. Se una card ha border-radius: 16px e padding: 8px, l'area di contenuto interna dovrebbe avere border-radius: 8px (raggio genitore meno padding). La formula è: raggio interno = raggio esterno - gap tra elementi. Se il gap è più grande del raggio esterno, il raggio interno dovrebbe essere 0 (nessun arrotondamento). Questo principio si applica alle card che contengono immagini, contenitori annidati e qualsiasi relazione genitore-figlio in cui entrambi hanno angoli arrotondati. Ignorare questa regola crea larghezze di gap incoerenti agli angoli che appaiono visivamente sbagliate anche se non riesci a identificare immediatamente perché. Le CSS shapes e border-radius servono a scopi diversi che a volte vengono confusi. Border-radius arrotonda gli angoli visivi e l'area di hit di un elemento. Il CSS clip-path crea forme arbitrarie ritagliando (circle(), ellipse(), polygon(), path()). Per semplici rettangoli arrotondati, border-radius è più performante e più facile da mantenere. Per forme complesse (triangoli, esagoni, poligoni personalizzati), clip-path è necessario. Border-radius è composto sulla GPU ed è uno degli effetti visivi più economici nel CSS. Clip-path con poligoni complessi può essere più costoso. La proprietà shape-outside usa border-radius per il text wrapping intorno agli elementi arrotondati, creando layout in stile magazine. Le prestazioni di border-radius sono generalmente eccellenti. Gli angoli arrotondati sono renderizzati dal compositore GPU in tutti i browser moderni e non innescano ricalcoli di layout o ridisegnamenti durante le animazioni. Animare border-radius stesso è anche performante perché il browser può interpolare i valori e comporre il risultato sulla GPU. Questo rende border-radius adatto agli effetti di hover (transizione da angoli quadrati ad arrotondati) e agli elementi animati. L'unica considerazione sulle prestazioni è quando border-radius è combinato con box-shadow su molti elementi, poiché ciascun'ombra arrotondata richiede ulteriore lavoro di composizione. Il supporto dei browser per border-radius è universale in tutti i browser moderni senza prefissi. I prefissi -webkit-border-radius e -moz-border-radius non sono più necessari da circa il 2012. Gli unici casi limite coinvolgono la sintassi con barra per angoli ellittici, che è supportata ovunque da IE9. Se stai supportando browser molto vecchi (IE8), border-radius si degrada gracefulmente: l'elemento semplicemente si renderizza con angoli quadrati. Nessuna funzionalità è persa, solo l'arrotondamento visivo. Le tendenze di design che coinvolgono border-radius cyclical tra estremi. I primi anni 2010 favorivano l'arrotondamento sottile da 3 a 5 px. La metà degli anni 2010 è tornata agli angoli affilati a 0 px nel flat design. La fine degli anni 2010 ha riportato l'arrotondamento morbido con raggi da 8 a 16 px nel material design e nelle interfacce influenzate da iOS. I primi anni 2020 hanno introdotto design super-arrotondati con raggi da 20 px+ e forme blob asimmetriche. Le tendenze attuali favoriscono l'arrotondamento medio (8-16 px) per i componenti UI e l'arrotondamento più grande (24 px+) per card e contenitori, creando una sensazione morbida e accessibile. La forma squircle (superellisse), che Apple usa per le icone delle app, ha guadagnato popolarità ma richiede clip-path o SVG perché border-radius crea un arco circolare standard, non una superellisse. Valori di border-radius coerenti attraverso un sistema di design creano coesione visiva. Definisci una scala di radius token: --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Applica questi token coerentemente: i pulsanti usano --radius-md, le card usano --radius-lg, gli avatar usano --radius-full, i piccoli badge usano --radius-sm. Questo approccio sistematico previene l'inconsistenza visiva di valori di raggio casuali (6px qui, 10px là, 14px da qualche altra parte) che fa sembrare i design non rifiniti. Molti framework CSS (Tailwind, Chakra UI) includono scale di radius predefinite per questo motivo. Border-radius responsive può essere ottenuto usando clamp(), min() o media query. Una card con border-radius: clamp(8px, 2vw, 24px) ha arrotondamento più piccolo su schermi piccoli e arrotondamento più grande su schermi larghi. Ciò previene che raggi grandi dominino elementi piccoli su mobile. Alternativamente, riduci border-radius ai breakpoint mobile: border-radius: 24px su desktop, 12px su tablet, 8px su mobile. Per card mobile a larghezza piena che toccano i bordi dello schermo, rimuovere border-radius interamente su schermi piccoli (border-radius: 0 al breakpoint mobile) è un pattern comune che massimizza l'area di contenuto. Border-radius con immagini richiede overflow: hidden sul contenitore per ritagliare l'immagine alla forma arrotondata. Senza overflow: hidden, l'immagine si estende oltre gli angoli arrotondati e l'arrotondamento appare solo sullo sfondo del contenitore. Un approccio alternativo usa l'immagine stessa come background-image su un elemento arrotondato. Per gli elementi <img>, la proprietà object-fit controlla come l'immagine riempie il contenitore arrotondato: object-fit: cover riempie l'intera area (ritagliando come necessario), mentre object-fit: contain adatta l'intera immagine dentro (potenzialmente lasciando spazi). Entrambi gli approcci funzionano, ma overflow: hidden su un contenitore con un <img> figlio è più comune perché preserva l'elemento img per l'accessibilità (alt text) e la SEO. La creazione avanzata di forme combina border-radius con altre proprietà CSS per creare forme complesse senza immagini o SVG. Una forma a uovo usa raggi verticali asimmetrici: border-radius: 50% / 60% 60% 40% 40%. Una forma a foglia usa l'arrotondamento degli angoli opposti: border-radius: 0 50% 0 50%. Una forma a goccia combina border-radius su tre angoli con un quarto angolo affilato. Un fumetto usa border-radius sulla forma principale con uno pseudo-elemento (::before o ::after) per la coda. Queste forme solo CSS evitano la necessità di SVG o immagini per semplici elementi decorativi, riducendo le richieste HTTP e abilitando un facile theming del colore attraverso CSS custom properties. Border-radius e contenuto testuale interagiscono in modi specifici. Il testo dentro un elemento arrotondato non segue la curva. Il testo è disposto nel box di contenuto rettangolare, e gli angoli arrotondati ritagliano solo lo sfondo e il bordo. Per piccoli valori di raggio, questo non è notevole. Per grandi valori di raggio, il testo vicino agli angoli può apparire avere padding extra perché lo sfondo arrotondato recede dal bordo del contenuto. Questo è uno dei motivi per cui gli elementi con grandi valori di border-radius spesso hanno bisogno di più padding delle loro controparti quadrate. Se imposti border-radius: 24px su un pulsante, il padding dovrebbe essere almeno 12-16 px sui lati così che il testo non affolli visivamente il bordo curvo. L'animazione di border-radius tra stati crea transizioni di forma morbide. La transizione da border-radius: 0 a border-radius: 50% su un elemento quadrato lo morpha da quadrato a cerchio. Questo effetto è popolare per gli indicatori di caricamento, gli effetti di hover e le animazioni di reveal. La CSS transition: border-radius 0.4s ease gestisce l'interpolazione. Per morphing più complesso (transizione tra diverse forme asimmetriche usando la sintassi con barra), le transizioni CSS interpolano ciascuno degli otto valori indipendentemente, producendo forme intermedie morbide. I print stylesheet e border-radius meritano considerazione per le applicazioni web che gli utenti possono stampare. La maggior parte dei browser moderni renderizza border-radius in stampa, ma alcune versioni più vecchie no. Se il tuo design dipende dagli angoli arrotondati per il significato (non solo decorazione), testa l'output di stampa. Per fatture, ricevute e altri documenti stampabili, gli angoli arrotondati sono decorativi e la loro assenza in stampa non influisce sull'usabilità. Border-radius nei framework CSS e nelle librerie di componenti si è standardizzato a un approccio basato su token. Tailwind CSS usa classi come rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl e rounded-full. Bootstrap usa rounded, rounded-circle, rounded-pill e rounded-0 attraverso rounded-5. Chakra UI usa borderRadius con dimensioni con nome (sm, md, lg, xl, full). Comprendere come questi framework implementano border-radius ti aiuta a migrare tra sistemi e personalizzare i default per corrispondere ai tuoi requisiti di design. Gli squircle (superellissi) sono una forma che sembra un rettangolo arrotondato ma con una curva matematica diversa. Apple usa gli squircle per le icone delle app iOS. Uno squircle ha una curvatura più graduale alla transizione dal bordo dritto alla curva, producendo un aspetto più morbido di un arco di cerchio border-radius standard. Il CSS border-radius non può produrre un vero squircle perché usa archi circolari o ellittici. Per creare uno squircle nel CSS, hai bisogno di clip-path con una funzione path() o di una maschera SVG. La differenza visiva tra un rettangolo arrotondato border-radius e uno squircle è sottile a piccole dimensioni ma notevole a dimensioni più grandi, specialmente a raggi d'angolo sopra i 20 px. Le container query e border-radius possono lavorare insieme per un vero design di componenti responsive. Con le CSS container query (@container), puoi cambiare border-radius in base alla dimensione del contenitore anziché alla dimensione del viewport. Un componente card con border-radius: 24px in un contenitore largo può passare a border-radius: 12px quando è posto in una sidebar stretta, indipendentemente dalla larghezza complessiva della pagina. Questa responsiveness a livello di componente produce risultati visivi più coerenti dei soli media query basati su viewport. Border-radius negli elementi tabella richiede una gestione speciale. Per impostazione predefinita, border-radius su un elemento <table> non arrotonda gli angoli delle singole celle. Per creare una tabella con angoli esterni arrotondati, imposta border-collapse: separate (non collapse) sulla tabella, applica border-radius all'elemento tabella e nascondi l'overflow con overflow: hidden. Per singole celle arrotondate, applica border-radius a specifici elementi <td> o <th>. Il border-top-left-radius va sulla prima cella della prima riga, il border-top-right-radius sull'ultima cella della prima riga e così via. Questo approccio per cella è verboso ma dà controllo preciso. Le funzioni di temporizzazione delle transizioni influenzano come si sentono le animazioni di border-radius. Una transizione lineare produce un arrotondamento meccanico e robotico. Una transizione ease inizia veloce, rallenta nel mezzo e accelera alla fine, producendo una sensazione naturale. Una transizione ease-in-out crea accelerazione e decelerazione morbide. Per interfacce giocose, le funzioni cubic-bezier possono creare cambiamenti di raggio rimbalzanti o elastici: transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) supera il valore target prima di assestarsi. Abbina la funzione di temporizzazione allo stile di animazione complessivo della tua interfaccia. CSS Houdini e la Paint API aprono future possibilità per border-radius oltre ciò che l'attuale specifica offre. Con Houdini, puoi creare paint worklet personalizzati che disegnano qualsiasi forma d'angolo tu voglia: squircle, bordi scallops, bordi ondulati e altre forme che border-radius standard non può produrre. Mentre il supporto Houdini è ancora limitato (principalmente browser Chromium), rappresenta il futuro delle forme CSS personalizzate. Nel frattempo, clip-path SVG e maschere forniscono alternative cross-browser per forme d'angolo non standard. Testare border-radius attraverso risoluzioni dello schermo e densità di pixel conta perché il rendering dei bordi curvi differisce tra display standard (1x), Retina (2x) e densità più alte. Su un display 1x, un bordo di 1 px su un angolo arrotondato può apparire seghettato. Su un display 2x, lo stesso angolo si renderizza senza problemi perché ci sono più pixel fisici disponibili per rappresentare la curva. Se il tuo pubblico target include utenti su display a bassa densità, verifica che i tuoi angoli arrotondati appaiano accettabili a risoluzione 1x. Valori di raggio più grandi si renderizzano più fluidamente a tutte le densità perché la curva è più graduale. Lo strumento generatore di border-radius ti permette di adattare visivamente il raggio orizzontale e verticale di ciascun angolo indipendentemente, previsualizzare il risultato in tempo reale e copiare il CSS. Questo è più veloce che indovinare valori nel codice, in particolare per la sintassi con barra in cui la relazione tra otto valori e l'output visivo non è intuitiva. Usa il generatore per esplorare forme asimmetriche, trovare i valori esatti che corrispondono alla tua intenzione di design e poi applicare quei valori nel tuo foglio di stile.
Domande frequenti
Posso impostare valori diversi per ogni angolo?
Sì, puoi controllare indipendentemente tutti e quattro gli angoli: in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra.
Quali unità vengono usate?
Lo strumento usa pixel (px) per impostazione predefinita, che puoi cambiare nell'output CSS come necessario.
