Generatore border-radius
Arrotonda gli angoli e crea forme blob organiche.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Dagli angoli arrotondati classici ai blob di tendenza
La modalità 4 angoli copre il quotidiano: pulsanti, schede, avatar. La modalità blob usa la sintassi a otto valori per forme morbide e organiche molto in voga in illustrazioni e sfondi decorativi.
-
Scegli la modalità
4 angoli per un arrotondamento semplice, blob per una forma organica.
-
Regola i cursori
Il pulsante «Casuale» genera un blob unico con un clic.
-
Copia il CSS
La proprietà border-radius completa, pronta da incollare.
La sintassi in due esempi
| Modalità | CSS generato |
|---|---|
| 4 angoli uguali | border-radius: 16px; |
| Blob predefinito | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Prima della barra / | Raggi orizzontali dei 4 angoli |
| Dopo la barra / | Raggi verticali dei 4 angoli |
Tutto è calcolato nel tuo browser. Per ritagliare un’immagine sulla forma, aggiungi overflow: hidden sul contenitore.
Domande frequenti
Come arrotondo un solo angolo?
In modalità «4 angoli», imposta il cursore dell’angolo desiderato e lascia gli altri a 0. Il CSS generato elenca i raggi nell’ordine alto-sinistra, alto-destra, basso-destra, basso-sinistra; quando tutti i valori sono uguali, lo strumento scrive un solo valore.
Cos’è la sintassi blob a otto valori?
border-radius accetta raggi orizzontali e verticali separati da una barra «/». Per esempio, «30% 70% 70% 30% / 30% 30% 70% 70%» dà quattro angoli con raggi asimmetrici — è ciò che crea quelle morbide forme organiche.
Perché usare percentuali invece di pixel?
Le percentuali sono relative alla dimensione dell’elemento: il blob mantiene le proporzioni a qualsiasi misura. I pixel vanno meglio per un arrotondamento fisso, come un pulsante o una scheda dagli angoli costanti.
border-radius ritaglia il contenuto?
Bordo e sfondo seguono l’arrotondamento, ma il contenuto figlio può traboccare. Aggiungi «overflow: hidden» sull’elemento affinché immagini e contenuto siano ritagliati sugli angoli arrotondati.