CSS Border Radius Generator — Rounded, Elliptical, Organic Shapes

px produces the exact pixel radius regardless of element size. % is relative to the element's dimensions — 50% on a square produces a perfect circle, and 50% on a rectangle produces an ellipse. Use % when you want the shape to scale with the element.

The full CSS border-radius syntax lets each corner have separate horizontal and vertical radii, producing elliptical rather than circular corners. It's how you create organic 'blob' shapes for hero sections and illustrations without SVG.

Set border-radius to any value larger than half the element's height (or use 9999px as a safe default). The browser clamps to the actual maximum radius, giving perfectly-rounded ends regardless of the button's width or content.