Generatore border-radius

Quattro slider per gli angoli classici, oppure la modalità organica a 8 valori per creare forme "blob". Anteprima immediata e codice CSS da copiare.


    
    


    
🔒 Tutto avviene nel tuo browser: nessun dato viene inviato o salvato.

  


  

    
La sintassi a doppio raggio (con la barra)

    
Ogni angolo di border-radius è in realtà un quarto di ellisse, definito da un
    raggio orizzontale e uno verticale. Scrivendo border-radius: 60% 40% 30% 70% / 60% 30%
    70% 40%, i quattro valori prima della barra controllano i raggi orizzontali degli angoli
    (in senso orario da alto-sinistra), quelli dopo la barra i raggi verticali. Quando i due raggi
    di un angolo sono diversi, la curva diventa asimmetrica: è così che nascono le forme organiche.

    
Dove usare le forme "blob"

    
Le forme organiche funzionano bene come cornici per foto profilo, sfondi decorativi di hero
    section e pulsanti dal tono giocoso. Usando le percentuali invece dei pixel la forma si adatta
    a qualsiasi dimensione dell'elemento; puoi anche animare il passaggio tra due blob con una
    semplice transition: border-radius .4s per un effetto "gelatina" al passaggio del
    mouse.