Crea visivamente il border-radius CSS con anteprima in tempo reale e copia codice pronto per la produzione.

Anteprima Trascina le maniglie agli angoli
CSS
border-radius: ;

100% privato — tutto viene eseguito nel tuo browser. Niente viene caricato.

Tutti gli angoli
px
px
Elemento
Preset

Informazioni su Generatore di Border Radius CSS

Il Generatore di Border Radius CSS crea di tutto, dalle schede dolcemente arrotondate alle forme organiche a blob. Trascina le maniglie degli angoli direttamente sull'anteprima, oppure imposta ogni angolo numericamente — inclusa la sintassi completa a otto valori, dove ogni angolo ha raggi orizzontali e verticali separati. È proprio quel secondo asse a sbloccare uova, foglie, lacrime e blob.

Un interruttore "collega angoli" mantiene tutti e quattro gli angoli sincronizzati per un arrotondamento uniforme classico, mentre scollegandoli si libera ogni angolo per forme asimmetriche. Dodici preset — rounded, pill, circle, squircle, due blob, leaf, egg, arch, teardrop, petal e wave — dimostrano cosa può fare la proprietà, e un pulsante casuale genera forme organiche fresche all'infinito.

Puoi cambiare l'unità, ricolorare l'elemento e la tela per adattarli al tuo design, e copiare il valore nudo di border-radius o una regola CSS completa. Lo strumento è al 100% lato client — nulla viene caricato.

Come usare Generatore di Border Radius CSS

  1. Trascina le maniglie degli angoli sull'anteprima, oppure disattiva "Collega tutti gli angoli" per modificare ogni angolo separatamente.
  2. Imposta il raggio orizzontale e verticale per ogni angolo per forme organiche simili a blob.
  3. Scegli la tua unità e regola i colori dell'elemento e dello sfondo per visualizzarli nel contesto.
  4. Prova i preset — pill, squircle, blob, leaf, teardrop e altri — oppure premi casuale.
  5. Copia il valore di border-radius o il CSS completo.

Domande frequenti

I valori prima della barra sono i raggi orizzontali dei quattro angoli; quelli dopo sono i raggi verticali. Far differire i due assi per ogni angolo è ciò che trasforma un semplice riquadro arrotondato in un uovo, una foglia o un blob.

Per un cerchio, usa un elemento quadrato con border-radius: 50%. Per una pillola, dai a un rettangolo qualsiasi un raggio pari almeno alla metà della sua altezza — i preset cerchio e pillola impostano entrambi istantaneamente.

Sì — border-radius ritaglia il box dell'elemento, incluse le immagini di sfondo, e overflow: hidden estende il ritaglio al contenuto figlio. Applicare un raggio a blob a un elemento img è un modo rapido per ottenere maschere fotografiche organiche.

Sì, border-radius si interpola in modo fluido con le transizioni CSS quando entrambi gli stati hanno unità compatibili. Animare tra due valori blob al passaggio del mouse è un popolare effetto di morphing organico — genera entrambi gli stati qui e fai la transizione tra loro.

Sì, completamente gratuito e privato: funziona solo nel tuo browser, senza account e senza invio di dati da nessuna parte.


Ricerche popolari
generatore border radius css generatore di border radius generatore fancy border radius generatore angoli arrotondati css strumento online border radius css generatore border radius ellittico generatore forme blob css strumento anteprima border radius
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.