Generatore di border-radius

Trasforma un elemento quadrato in un cerchio perfetto. Per un cerchio vero, l'elemento deve avere larghezza e altezza uguali — ad esempio `width: 100px; height: 100px; border-radius: 50%`. Il raggio del 50% si incontra al centro su tutti e quattro i lati, creando una curva perfetta. Su un elemento non quadrato, il 50% crea invece un'ellisse — più larga che alta o più alta che larga, a seconda delle dimensioni dell'elemento. Questo è il modo più comune per creare immagini avatar circolari, bottoni rotondi e contenitori di icone in CSS.

Usa `border-radius: 9999px` (o qualsiasi valore molto grande come 100px) su un elemento non quadrato come un bottone o un badge. Il browser limita automaticamente il raggio alla metà della dimensione più corta dell'elemento, così i lati corti diventano semicerchi perfetti mentre i lati lunghi rimangono dritti. Questo crea il classico bottone CTA a forma di capsula presente in praticamente ogni design system moderno. Il trucco `9999px` funziona indipendentemente dalle dimensioni dell'elemento — non c'è bisogno di calcolare manualmente la metà dell'altezza. Il preset Pillola di questo generatore applica questo pattern istantaneamente.

I valori in pixel sono assoluti — un raggio di `12px` rimane 12 pixel indipendentemente dalle dimensioni dell'elemento. Se l'elemento si ingrandisce o si rimpicciolisce, la dimensione dell'angolo rimane fissa. I valori percentuali sono relativi — `50%` si curva sempre fino al punto medio esatto di ogni lato, producendo una forma proporzionale che scala con l'elemento. Usa la percentuale (`50%`) per forme come cerchi e pillole che devono scalare con l'elemento. Usa i pixel per i componenti dell'interfaccia utente come card, bottoni e input dove vuoi una dimensione dell'angolo coerente, definita dal design system, indipendentemente dal contenuto.

Un `border-radius` standard curva gli angoli solo verso l'esterno (convesso). Per un angolo invertito o concavo — la curva verso l'interno a 'intaglio' usata su biglietti, tab e fumetti — non puoi usare `border-radius` da solo. La tecnica comune è una maschera radial-gradient: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, ripetuta per ogni angolo che vuoi far curvare verso l'interno. Un'alternativa è uno pseudo-elemento posizionato (`::before`) con il colore di sfondo della pagina e il proprio `border-radius` verso l'esterno, sovrapposto all'angolo in modo da sembrare che scolpisca una forma concava. Per i bordi scallopati o perforati — come la linea di strappo di un biglietto — una maschera radial-gradient ripetuta lungo un lato produce la perforazione a festoni. Quindi il 'border radius invertito' è in realtà un trucco di mascheratura piuttosto che un valore border-radius — utile da sapere quando si cerca un generatore border radius invertito.

Usa le proprietà dei singoli angoli: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius` o `border-bottom-left-radius`. Ad esempio, `border-bottom-right-radius: 24px` arrotonda solo l'angolo in basso a destra, lasciando gli altri tre spigolosi. Puoi combinarli liberamente: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` crea una forma arrotondata in diagonale. Nella forma abbreviata, due valori impostano le coppie di angoli opposti: `border-radius: 16px 0` arrotonda gli angoli in alto a sinistra e in basso a destra, lasciando quelli in alto a destra e in basso a sinistra spigolosi.

In senso orario partendo dall'angolo in alto a sinistra: In alto a sinistra → In alto a destra → In basso a destra → In basso a sinistra. Quindi `border-radius: 16px 8px 0 8px` dà all'angolo in alto a sinistra 16px, in alto a destra 8px, in basso a destra 0 e in basso a sinistra 8px. Questo corrisponde alla direzione abbreviata CSS standard usata da `margin`, `padding` e `border-width`. Con due valori, il primo si applica agli angoli in alto a sinistra e in basso a destra; il secondo a quelli in alto a destra e in basso a sinistra. Con tre valori, il secondo si applica sia all'angolo in alto a destra che a quello in basso a sinistra. Un singolo valore si applica uniformemente a tutti e quattro gli angoli.

Sì — applica `border-radius` direttamente all'elemento `<img>`: `img { border-radius: 50%; width: 100px; height: 100px; }` per un avatar circolare. In alternativa, avvolgi l'immagine in un `<div>` con `overflow: hidden` e applica border-radius al contenitore, il che ti dà un maggiore controllo sul layout. Usa la funzione di caricamento immagini di questo strumento per visualizzare l'anteprima del tuo raggio sulla tua foto reale prima di copiare il CSS. Questo è particolarmente utile per i ritagli avatar, le miniature delle card multimediali e i layout galleria dove la forma di ritaglio esatta influisce sul design.

Imposta tre angoli a un valore grande e lascia uno a zero: `border-radius: 50% 50% 50% 0`. Combinato con `transform: rotate(-45deg)`, questo crea la classica forma a goccia del pin sulla mappa. Regola quale angolo è zero per puntare la goccia in direzioni diverse: `0 50% 50% 50%` punta a sinistra, `50% 0 50% 50%` punta a destra. L'angolo a zero crea la punta appuntita; i tre angoli con raggio grande formano il corpo arrotondato. Utile per indicatori di posizione, puntatori e accenti decorativi nell'interfaccia utente in stile illustrazione.

Lo slash separa i raggi orizzontale e verticale per ogni angolo. La sintassi è: `border-radius: [raggi orizzontali] / [raggi verticali]`. Ad esempio, `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` crea una forma simile a un uovo in cui ogni angolo ha una curva ellittica asimmetrica. Il generatore di Blob Casuale di questo strumento usa questa sintassi per produrre forme organiche e asimmetriche — molto diffuse per sfondi di sezioni hero, blob decorativi ed elementi di design in stile illustrazione. Ogni angolo può avere un rapporto diverso tra il raggio orizzontale e verticale.

Lo strumento border-radius di cssmatic.com è funzionale ma datato — manca di caricamento immagini, generazione di blob e di una libreria di preset. Il sito css-tricks.com è un'eccellente documentazione ma non è un generatore interattivo. Il clip-path maker di bennettfeely.com si sovrappone per casi d'uso ma si rivolge a clip-path anziché a border-radius. Il generatore di UtiloKit offre: anteprima live con caricamento immagini (elaborata interamente lato client), preset di forme (cerchio, pillola, card, uovo, blob), generazione casuale di blob usando la sintassi slash a 8 valori, cambio unità px/%, e tre formati di copia. Niente pubblicità, niente watermark, nessuna registrazione, e nulla inviato a un server.

No — l'immagine viene caricata esclusivamente usando la File API del browser e non lascia mai il tuo dispositivo. L'elemento di anteprima renderizza l'immagine localmente usando una chiamata `createObjectURL()` che rimane interamente nella memoria del browser. Nessun upload, nessuna elaborazione su server, nessuna archiviazione cloud. La stessa architettura lato client si applica a tutte le altre funzionalità: input dei cursori, generazione CSS, randomizzazione dei blob e copia negli appunti vengono eseguiti in JavaScript senza alcuna richiesta di rete dopo il caricamento iniziale della pagina. Le tue immagini e il tuo lavoro di design rimangono completamente privati.

`border-radius` è completamente animabile tramite transizioni CSS e animazioni keyframe. Usa `transition: border-radius 0.3s ease` per interpolare fluidamente tra due valori al passaggio del mouse. Usa `@keyframes` per trasformare continuamente tra forme — animare da `0` a `50%` fa pulsare un quadrato in un cerchio. Trasformare tra due forme blob (diversi valori slash a 8 valori) crea animazioni fluide e organiche molto diffuse negli sfondi hero. Nota che l'animazione di border-radius innesca un repaint ad ogni fotogramma, quindi usa `will-change: border-radius` sugli elementi che si animano frequentemente.

`border-radius` è puramente visivo — ritaglia l'aspetto pittorico dell'elemento ma non modifica il suo box di layout, l'area del margine o l'area di hit degli eventi puntatore. Gli angoli quadrati invisibili sono ancora cliccabili e occupano ancora il loro spazio nel layout. Questo è importante da sapere per le interfacce touch: un bottone circolare ha ancora una regione cliccabile quadrata ai suoi angoli. Se hai bisogno che l'area di hit segua con precisione la forma arrotondata, usa invece `clip-path: circle()`, che ritaglia anche gli eventi puntatore. `box-shadow` segue `border-radius` correttamente; `outline` non lo fa nella maggior parte dei browser — usa `box-shadow: 0 0 0 3px colore` come alternativa per un anello di focus arrotondato.

Sì — lo strumento è completamente responsive e funziona in qualsiasi browser mobile moderno. Su iPhone, usalo in Safari o Chrome senza installare nulla. Su Android, Chrome, Firefox ed Edge funzionano tutti. I cursori sono ottimizzati per il tocco con handle di trascinamento dalle dimensioni appropriate. Il caricamento immagini usa il selettore file nativo su mobile, permettendoti di scegliere dal rullino fotografico o dall'app file. La copia del CSS negli appunti funziona tramite la Web Clipboard API standard supportata da tutti i browser mobili moderni. L'intero strumento funziona lato client, quindi non è necessario scaricare un'app, creare un account o inviare dati da nessuna parte.