CSS Border Radius Generator
Round corners, pills, circles and blob shapes with a live preview.
Use via API
Build or normalise a CSS border-radius value (including elliptical blob shapes) from a shorthand value or a named preset. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/border-radius-generator
curl https://pithlab.com/api/v1/tools/border-radius-generator \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"value":"30% 70% 70% 30% / 30% 30% 70% 70%"}'About the Border Radius Generator
Design CSS border-radius visually: set each corner in px, % or rem, make elliptical corners and organic blob shapes, and copy the shortest CSS.
How to use the Border Radius Generator
- Pick a preset or start from the default rounded corners.
- Choose px, % or rem, then set the radius. Untick Same radius for all corners to set each corner on its own.
- Tick Elliptical corners to set horizontal and vertical radii separately; this is how organic blob shapes are made.
- Or type a value straight into the advanced field. Copy the CSS when the preview looks right.
Examples
Input
16px, 16px, 16px, 16px
Output
border-radius: 16px;
Input
12px, 12px, 0, 0
Output
border-radius: 12px 12px 0 0;
Input
0, 48px, 0, 48px
Output
border-radius: 0 48px;
Input
30%, 70%, 70%, 30% / 30%, 30%, 70%, 70%
Output
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
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, for top-left, top-right, bottom-right and bottom-left. Different horizontal and vertical radii give elliptical corners, which is how blob shapes are drawn.
How do I make a perfect circle or pill?
For a circle, give a square element border-radius: 50%. For a pill on any rectangle, use a very large length such as 999px; the browser scales overlapping radii down so the ends are perfect semicircles.
Should I use px, % or rem?
px keeps corners the same size whatever the element's size. % is relative to the element's width (horizontal) and height (vertical), so shapes scale with it. rem follows the root font size, which suits designs that scale with text.
Why do the values look shorter in the CSS?
The tool writes the shortest equivalent shorthand: one value when all corners match, two when opposite corners match, and three when top-right and bottom-left match.