What is the elliptical border radius syntax?

Using a slash (/) separates horizontal and vertical radii for each corner: border-radius: 50px 20px / 10px 40px. This creates oval-ish corners. The generator supports this via an "advanced mode" toggle.

Can I create a circle?

Yes. Set border-radius: 50% on a square element to get a perfect circle. Use the "circle preset" button.

Can I create organic blob shapes with border-radius?

Yes. Use different values for each of the 4 corners in both horizontal and vertical directions — the full 8-value syntax: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates an organic rounded shape.

What units can I use for border-radius?

px (fixed size), % (relative to element dimensions), em (relative to font size), and rem (relative to root font size). % is most flexible for responsive elements since the radius scales with element size.

CSS Border Radius Generator

Generates CSS border-radius values visually. Control all four corners individually or together. Supports the full CSS shorthand syntax (top-left / top-right / bottom-right / bottom-left) and the advanced per-corner elliptical syntax (e.g., 40px 40% / 10px 20px). Live preview on a configurable box.

Runs entirely in your browser — your input is never uploaded, stored, or logged.

Drag the corner sliders or enter values to generate the border-radius CSS with live preview. Pair with the Box Shadow Generator to add depth to your rounded elements.