CSS Border Radius: Forme, Blob e Angoli Creativi

Esplora border-radius dai semplici angoli arrotondati alle forme blob complesse con la sintassi a 8 valori.

5 min di lettura CSS · Design · UI 6 sezioni + FAQ

CSS border-radius e molto piu potente di quanto la maggior parte degli sviluppatori realizzi. Oltre i semplici angoli arrotondati esiste una sintassi completa a 8 valori che puo creare forme organiche e blob.

Il salto dalla sintassi a 4 valori a quella a 8 valori e dove inizia la vera creativita. Ogni angolo puo avere raggi orizzontali e verticali indipendenti, permettendo forme fluide e organiche.

Sintassi border-radius (1-4 valori)

border-radius accetta da 1 a 4 valori usando la shorthand CSS standard. Un valore: tutti i quattro angoli uguali. Due valori: primo per alto-sinistra e basso-destra, secondo per alto-destra e basso-sinistra.

Tool gratuito Generatore Border Radius Crea forme personalizzate e bordi blob con output CSS live

Shorthand e longhand

La shorthand border-radius imposta tutti gli angoli contemporaneamente. Le proprieta longhand impostano i singoli angoli: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Sintassi a 8 valori per forme asimmetriche

La sintassi a 8 valori usa uno slash per separare i raggi orizzontali e verticali: border-radius: Ah Bh Ch Dh / Av Bv Cv Dv. Prima dello slash ci sono i raggi orizzontali, dopo quello verticali.

Tool gratuito Generatore Box Shadow Crea ombre box CSS a strati con anteprima live

Creare cerchi e pillole

Per un cerchio: imposta border-radius: 50% su un elemento quadrato. Per una pillola: imposta border-radius: 9999px su un elemento rettangolare.

Tecnica delle forme blob

Le forme blob usano la sintassi a 8 valori con valori asimmetrici per creare forme organiche e fluide. Un blob tipico: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.

Pattern di design UI

Pattern border-radius comuni: 4-8px per angoli carte sottili, 12-16px per carte prominenti (stile iOS), 50% per cerchi avatar, 9999px per chip e badge.

Tool gratuito Generatore Glassmorphism Crea effetti UI vetro smerigliato con CSS backdrop-filter

Domande frequenti

Qual e la differenza tra border-radius: 50% e border-radius: 100%? +
Per elementi con larghezza e altezza uguali, entrambi producono un cerchio. I valori sopra 50% sono trattati come 50% dai browser.
Posso usare border-radius con valori percentuali? +
Si. I valori percentuali sono relativi alle dimensioni dell'elemento — 50% della larghezza per i raggi orizzontali.
Cos'e lo slash nella sintassi border-radius? +
Lo slash separa i raggi orizzontali (prima) da quelli verticali (dopo). Questo consente angoli ellittici.
Come creo una forma blob in CSS? +
Usa la sintassi border-radius a 8 valori: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.
border-radius influisce sugli elementi figli? +
border-radius taglia gli elementi figli se overflow: hidden e impostato sul genitore.
Posso animare border-radius? +
Si, border-radius e completamente animabile con CSS transition e animation.
Quale valore border-radius crea una forma a pillola? +
border-radius: 9999px crea una forma a pillola su qualsiasi elemento rettangolare.