CSS Border Radius Generator
Four corner sliders plus an 8-value elliptical mode with live preview and copy-ready CSS.
About CSS Border Radius Generator
In CSS, percentage border-radius values are resolved against each axis independently, so 50% on a rectangle produces an ellipse rather than a circle. The slash syntax (/) lets you set the horizontal and vertical radius of every corner separately, which is exactly how organic blob shapes are built. This generator exposes all four corners plus the 8-value elliptical mode with a live preview and copy-ready CSS.
How to use CSS Border Radius Generator
- 1
Pick Simple or Elliptical mode and choose px or % as the unit.
- 2
Drag each corner slider and watch the preview box reshape live.
- 3
Hit a preset shape — pill, squircle or blob — for an instant starting point.
- 4
Turn on Link corners to move all four corners together in lockstep.
- 5
Copy the generated border-radius rule straight into your stylesheet.
Frequently asked questions
Why doesn't border-radius: 50% make my rectangular button a circle?
Percentages apply to width and height separately, so on a non-square element you get an ellipse. For a true stadium/pill shape use a px value larger than half the shorter side, or click the Pill preset.
What does the slash (/) do in a border-radius value?
Values before the slash are the horizontal radii and values after it are the vertical radii of each corner. That split is what makes organic, blob-like corners possible.
Are these blobs real Apple squircles?
No. A true squircle is a superellipse and cannot be reproduced exactly with border-radius; this tool gives a close, fully browser-native approximation with no SVG or clip-path needed.
What order are the four values in?
Top-left, top-right, bottom-right, bottom-left — clockwise from the top-left corner. When some values match, the tool automatically shortens the output.