Free CSS Border Radius Generator
Presets
Something not working? Report a problem
About the Border Radius Generator
Set individual corner radii or use the elliptical mode — live preview, px/% toggle, and one-click CSS copy for any shape from pill to leaf, all in your browser.
How to use the Border Radius Generator
- 1Choose Uniform mode to set all corners at once, or Individual to control each corner separately.
- 2Pick a unit — px for fixed sizes, % for responsive shapes, rem for scalable designs.
- 3Enable Elliptical mode to set separate X and Y radii per corner for blob and leaf shapes.
- 4Use a preset for common shapes like Pill, Card or Squircle, then fine-tune the sliders.
- 5Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
What is the difference between px, % and rem?
px is an absolute pixel value. % is relative to the element's own dimensions (50% on each corner creates a perfect circle for square elements, or a pill for rectangles). rem is relative to the root font size — good for designs that need to scale with the user's text size setting.
What is elliptical border radius?
CSS border-radius accepts two values per corner separated by a slash — the first is the horizontal radius and the second is the vertical radius. Using different values creates oval corners and enables organic shapes like leaves, blobs and teardrops.
What is a squircle?
A squircle is a shape between a square and a circle, achieved with a large percentage border-radius (around 25–35%). Apple uses squircles for app icons; they feel softer than squares but more structured than full circles.
Why does the Pill preset use 50% instead of a px value?
50% always produces a pill shape regardless of the element's size because it's calculated relative to the element's own width and height. A fixed px value would only produce a pill for elements of a specific height.