Border radius generator

Four sliders for classic rounded corners, or the 8-value organic mode for "blob" shapes. Instant preview and CSS code ready to copy.


    
    


    
🔒 Everything happens in your browser: no data is sent or stored.

  


  

    
The double-radius syntax (with the slash)

    
Every corner of border-radius is actually a quarter of an ellipse, defined by a
    horizontal radius and a vertical one. When you write border-radius: 60% 40% 30% 70% / 60%
    30% 70% 40%, the four values before the slash set the horizontal radii of the corners
    (clockwise from top-left) and the ones after the slash set the vertical radii. Whenever the two
    radii of a corner differ, the curve turns asymmetric, that's exactly how organic shapes are
    born.

    
Where blob shapes shine

    
Organic shapes work great as frames for profile photos, decorative backgrounds in hero
    sections, and buttons with a playful feel. Using percentages instead of pixels lets the shape
    adapt to any element size; you can even animate between two blobs with a simple
    transition: border-radius .4s for a jelly-like effect on hover.