⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore di Border Radius

Progetta il border-radius CSS in modo visivo: quattro slider indipendenti per ogni angolo in px o percentuale, una scorciatoia per collegare tutti gli angoli e creare cerchi e pillole all'istante, più una modalità blob organica con forme casuali.

🔒 Elaborato interamente nel tuo browser: nulla di ciò che inserisci qui verrà mai caricato.

12px
12px
12px
12px
Elaborazione... 0%

Risultato

Una dichiarazione border-radius può accettare fino a quattro valori d'angolo indipendenti più una sintassi opzionale a otto valori con barra per curve organiche: più elementi mobili di quanto la maggior parte delle persone immagini, finché non hanno bisogno di qualcosa che vada oltre una semplice card arrotondata. Questo generatore mette a schermo ognuno di questi elementi: quattro slider per gli angoli con la propria unità in pixel o percentuale, una scorciatoia per collegare tutti gli angoli per forme simmetriche e una modalità blob per forme che nessun singolo valore di raggio può esprimere.

La modalità angoli copre le forme a cui si ricorre davvero: collega ogni angolo a un solo slider per cerchi perfetti, pillole e squircles, oppure scollegali per arrotondare solo la parte superiore di un pannello a discesa o un solo lato di una card. Un'anteprima a scacchiera dietro la forma, commutabile tra sfondo chiaro e scuro, rende evidente esattamente quali angoli vengono ritagliati a ogni raggio, lo stesso espediente visivo che gli strumenti per i file su questo sito usano per mostrare la trasparenza.

La modalità blob è l'altra metà: la sintassi CSS a otto valori con barra permette ai raggi orizzontali e verticali di ciascun angolo di differire, ed è questo che trasforma un rettangolo arrotondato in un contorno organico e irregolare. Premi Randomizza in qualsiasi momento per una nuova forma e copia l'esatto CSS che la genera, senza bisogno di esportazioni SVG o librerie esterne. Le pagine preimpostate coprono le richieste che le persone digitano davvero in un motore di ricerca: un cerchio perfetto, un pulsante a pillola a forma di stadio, uno squircle in stile iOS e un blob organico già pronto.

Come ogni strumento su questo sito, funziona interamente nel tuo browser: nessun upload, nessun account, e il generatore continua a funzionare offline una volta caricata la pagina.

Ti piace questo strumento? Pensi che questo prodotto sia utile? Ne vedi il potenziale e vuoi supportarlo?

🛡️
Eseguito nel Browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione avviene completamente offline. Sicuro al 100%.

Formati accettati e regole

  • Modalità angoli: slider indipendenti per il raggio in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra, ciascuno commutabile tra le unità px e percentuale.
  • Opzione per collegare tutti gli angoli che guida ogni angolo da un solo slider, più un'anteprima a scacchiera su sfondo chiaro o scuro per mantenere visibili gli angoli ritagliati.
  • Modalità blob con un pulsante Randomizza che costruisce forme organiche con la sintassi a otto valori e barra, mostrate in grande e pronte da copiare come CSS.

Vantaggi principali

✓ Ogni slider aggiorna all'istante l'anteprima e la linea di CSS, così non devi mai immaginare che aspetto abbia 12px 40% 8px 24%.
✓ La scorciatoia per collegare tutti gli angoli trasforma un solo slider in un cerchio perfetto, una pillola o uno squircle senza dover toccare a mano gli altri tre angoli.
✓ La modalità blob genera forme organiche e casuali con la sintassi CSS a otto valori separati da barra, un effetto che un singolo valore border-radius non potrà mai produrre.

Casi d'uso

  • • Regola indipendentemente i quattro raggi degli angoli di una card — arrotonda solo la parte superiore di un pannello a discesa o un solo lato di una scheda.
  • • Collega tutti e quattro gli angoli a un unico cursore per creare in pochi secondi un cerchio perfetto, un pulsante a forma di pillola o uno squircle in stile iOS.
  • • Passa alla modalità blob e premi Randomizza finché una forma organica non si adatta allo spazio vuoto dietro un'immagine hero o un avatar, poi copia il CSS.