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.