Generatore di Border Radius

Dai forma agli angoli con più controllo

Il raggio dei bordi è uno dei modi più rapidi per cambiare la personalità di un'interfaccia. Valori piccoli danno un aspetto preciso e strutturato, valori medi rendono card e pulsanti più amichevoli, mentre valori grandi permettono di creare pillole, forme organiche o pannelli illustrati dal tono giocoso. Questo generatore di border radius espone la sintassi CSS completa, così puoi progettare sia normali rettangoli arrotondati sia angoli ellittici senza scrivere a mano la notazione con la barra.

Ogni angolo ha un raggio orizzontale e uno verticale. Quando i valori coincidono, l'angolo è circolare e il CSS assomiglia alla familiare dichiarazione border-radius a quattro valori. Quando X e Y sono diversi, l'angolo diventa ellittico e il CSS scrive prima i valori orizzontali, poi una barra, quindi i valori verticali. L'anteprima in tempo reale rende chiara questa relazione, perché la forma cambia subito mentre muovi ogni controllo.

Quando servono i raggi ellittici

Gli angoli ellittici sono utili quando vuoi qualcosa di più organico di una semplice card, ma hai comunque bisogno di un CSS leggero e responsive. Possono rendere meno anonimi avatar, box in evidenza, forme a coupon, maschere per immagini e pannelli decorativi. Gli angoli asimmetrici aiutano anche a creare una direzione visiva, attirando l'attenzione verso un titolo o una call to action. Usa il preset blob come punto di partenza, poi riduci i valori più forti se la forma inizia a distrarre dal contenuto.

Usare i valori del raggio in modo coerente

Nei design system di produzione conviene mantenere un piccolo insieme di raggi standard per i componenti di uso quotidiano e usare valori personalizzati solo dove la forma ha uno scopo preciso. Pulsante, campo di input e card appaiono di solito più coerenti quando condividono dimensioni degli angoli correlate. Le sezioni decorative possono essere più espressive, ma devono comunque adattarsi bene a larghezze diverse. Dopo aver copiato il CSS generato, provalo sulla dimensione reale dell'elemento: un raggio equilibrato sulla card di anteprima può risultare troppo marcato su un badge compatto o troppo debole su un ampio pannello hero.