Generatore CSS border-radius
Crea lo shorthand border-radius dai valori per angolo, con angoli ellittici e l'equivalente Tailwind corrispondente.
Generatore CSS border-radius
Imposta un raggio per ogni angolo e questo strumento assembla il CSS border-radius corretto, compresso nel shorthand valido più breve: un valore quando i quattro angoli corrispondono, due o tre quando gli angoli opposti si ripetono, e l'elenco completo di quattro valori quando ogni angolo è diverso. È costruito per chiunque stia formando carte, pulsanti, avatar, modal o campi di input e desideri CSS pulito e copiabile senza fare manualmente la matematica degli angoli.
Scegli "Uguale per tutti gli angoli" per un semplice rettangolo arrotondato, oppure passa a "Angoli separati" per regolare ogni angolo indipendentemente in px, percentuale o rem. L'attivazione degli angoli ellittici aggiunge la notazione barra a otto valori che border-radius supporta: un raggio orizzontale e un raggio verticale distinto per angolo, controllati da un singolo cursore di proporzione per cui uno squircle o una forma pillola appiattita richiede un trascinamento anziché otto campi. L'opzione "Goccia organica casuale" genera una nuova forma asimmetrica ad ogni esecuzione, il tipo di contorno morbido e irregolare utilizzato dietro le immagini hero e le gocce decorative. Passa l'output tra lo shorthand border-radius e le quattro proprietà border-*-radius estese, e attiva l'opzione Tailwind per ottenere la corrispondente classe utility a valore arbitrario insieme al CSS semplice.
I valori vengono convalidati mentre digiti: i numeri negativi vengono trattati come zero e non esiste uno stato che produca CSS rotto. Il conteggio dal vivo sotto l'output segnala quante righe di dichiarazione sono state generate, quanti valori d'angolo distinti sono stati compressi nello shorthand e il conteggio esatto dei caratteri, aggiornandosi mentre regoli qualsiasi opzione.
Tutto viene eseguito localmente nel tuo browser: nessun valore d'angolo o CSS generato viene mai inviato da nessuna parte. Copia il risultato, scaricalo come file .txt, o invialo direttamente all'input di un altro strumento per continuare a lavorarci.