Generatore di border-radius CSS

A cosa serve

border-radius sembra un numero solo finché tre angoli non devono essere diversi, e allora la forma abbreviata inganna: i quattro valori girano in senso orario dall'angolo in alto a sinistra, e la forma con la barra dà a ogni angolo un raggio orizzontale prima della barra e uno verticale dopo. È questa seconda forma a disegnare le sagome morbide e asimmetriche che si leggono come organiche invece che come una scatola arrotondata. Qui trovi un cursore per angolo, un elemento reale con il valore applicato invece di un'immagine, e un output compresso come lo scriverebbe una persona: quattro angoli uguali diventano un valore solo.

Come si usa

1. Scegli l'unità e scollega gli angoli se devono essere diversi.
2. Trascina ogni angolo finché l'anteprima non convince.
3. Attiva gli angoli ellittici per forme organiche, poi copia la dichiarazione.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

Che cosa significa la barra nel valore?

Tutto ciò che precede la barra è il raggio orizzontale di ogni angolo, tutto ciò che segue è quello verticale. Valori diversi ai due lati creano un'ellisse invece di un quarto di cerchio.

Percentuali o pixel?

I pixel mantengono la stessa curva a ogni dimensione, ed è ciò che di solito vogliono pulsanti e schede. Le percentuali scalano con l'elemento: il 50 per cento su un quadrato dà un cerchio.

Perché il mio output ha meno di quattro valori?

Il CSS comprime gli angoli ripetuti, e così fa questo strumento: quattro angoli uguali sono un valore, una diagonale uguale ne fa due. Il risultato è identico, solo più corto.