Generatore di border-radius

Come usare il generatore di border-radius

1. Trascina i punti sui bordi dell’anteprima. Ogni punto colorato imposta il raggio orizzontale di un angolo; con Angoli ellittici (8 valori) attivo, i punti bianchi impostano i raggi verticali.
2. Oppure inserisci valori precisi in Angoli: In alto a sinistra, In alto a destra, In basso a destra e In basso a sinistra, ciascuno con un campo Orizzontale e uno Verticale.
3. Scegli l’Unità: % (percentuale del riquadro) o px (pixel). Quando cambi unità, i valori attuali vengono convertiti e la forma resta identica.
4. Imposta Larghezza riquadro (px) e Altezza riquadro (px) come quelle del tuo elemento e usa Tutti gli angoli per arrotondarli tutti in una volta.
5. Prova i Modelli (Arrotondato, Pillola, Cerchio, Foglia, Goccia, Uovo, Biglietto e tre blob) oppure clicca su Blob casuale per una forma organica.
6. Spunta Proprietà estese se preferisci le quattro dichiarazioni border-*-radius, poi copia il Codice CSS con Copia.

Da tastiera: seleziona un punto e premi i tasti freccia per cambiare il raggio di un passo (10 con Maiusc).

La sintassi di border-radius

border-radius accetta da uno a quattro valori, nell’ordine alto a sinistra, alto a destra, basso a destra, basso a sinistra. Come per i margini, i valori mancanti vengono copiati dall’angolo opposto: border-radius: 10px 20px arrotonda di 10px gli angoli in alto a sinistra e in basso a destra, e di 20px gli altri due. Lo strumento scrive sempre la forma equivalente più corta.

In realtà ogni angolo è un quarto di ellisse con due raggi. Una barra separa i raggi orizzontali da quelli verticali, per un massimo di otto valori:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Prima della barra ci sono i raggi orizzontali dei quattro angoli, dopo la barra quelli verticali. Se le due liste coincidono, la parte dopo la barra viene omessa.

Pixel o percentuali?

• px dà la stessa curva qualunque sia la dimensione dell’elemento. È la scelta giusta per pulsanti, card e campi di input: border-radius: 8px.
• % è relativo all’elemento: i raggi orizzontali alla sua larghezza, quelli verticali alla sua altezza. 50% trasforma un quadrato in un cerchio e un rettangolo in un’ellisse. Sono le percentuali a far scalare le forme blob insieme all’elemento.

Per un pulsante a pillola usa un raggio in pixel pari almeno a metà dell’altezza. Il modello Pillola fa esattamente questo per le dimensioni del riquadro che hai inserito; funziona anche un valore enorme come 999px.

Quando due raggi adiacenti sommati superano il lato che condividono, i browser riducono proporzionalmente tutti i raggi finché non ci stanno. Ecco perché trascinare due maniglie l’una oltre l’altra non rompe la forma.

Forme blob

I modelli blob e Blob casuale usano otto percentuali in cui le due maniglie di ogni lato sommano 100 %. Le curve si incontrano così alla perfezione e la forma sembra un ciottolo levigato. Anima il passaggio tra due blob con una transition CSS su border-radius per un effetto “morphing”.