Generate CSS Border Radius Values
Shape any box by rounding its corners together or one at a time. Elliptical mode gives each corner separate horizontal and vertical radii, producing the slash syntax used for organic blob shapes.
How to generate border-radius CSS
- Pick a unit: px for fixed corners, % for shapes that scale with the box, or rem to follow the root font size.
- Drag the radius slider. Unlink the corners to set each one separately.
- Turn on elliptical mode to set horizontal and vertical radii per corner.
- Resize the preview to check the shape, then copy the shortest equivalent CSS.
Benefits
- Output is collapsed to the shortest valid shorthand, e.g. "8px" instead of "8px 8px 8px 8px".
- Presets for pills, circles, leaves, tabs and blobs give quick starting points.
- Adjustable preview dimensions show how percentage radii behave on non-square boxes.
Limitations
- When adjacent radii add up to more than the side length, browsers scale all corners down proportionally — the preview shows this, but the CSS keeps the values you set.
- Slider ranges are capped (200px, 50%, 12rem); type larger values into the CSS directly if you need them.
Privacy and security
Everything is computed in the page from the sliders. No input is uploaded or stored.
Read our privacy policy for details about the site as a whole.
Frequently asked questions
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, in the order top-left, top-right, bottom-right, bottom-left. "30% 70% / 70% 30%" therefore gives each corner a different ellipse.
How do I make a pill-shaped button?
Set a radius at least half the button's height. A very large value such as 999px works for any size because browsers clamp it automatically.
Why does 50% make a circle only on squares?
Percentages refer to the box's width for horizontal radii and its height for vertical radii, so on a rectangle 50% produces an ellipse.