CSS Border Radius Generator
Round each corner separately, or make organic blob shapes, and copy the CSS.
How to use CSS Border Radius Generator
- Set one radius for all corners, or untick "Same radius" and enter each corner.
- Switch to percent and tick "Separate vertical radii" to make organic blob shapes.
- Select Copy CSS. The shortest valid form is produced.
How it works
border-radius rounds corners in the order top-left, top-right, bottom-right, bottom-left (clockwise from the top left). One value applies to all four; two values set top-left/bottom-right and top-right/bottom-left. The generator always writes the shortest form that means the same thing.
Each corner is really a quarter of an ellipse with a horizontal and a vertical radius. Writing two sets of values separated by a slash, as in 30% 70% 30% 70% / 60% 40% 60% 40%, sets them independently, which is how organic "blob" shapes are made with no images. With percent, the radii scale with the element: 50% on a square gives a circle and on a rectangle an ellipse. With pixels, corners stay the same size whatever the element’s size; a very large value such as 999px gives a pill shape.
If the radii of two adjacent corners add up to more than the side between them, browsers scale all of them down proportionally, so values above 50% do not overlap.
Example
border-radius: 24px; gives evenly rounded corners; border-radius: 30% 70% 30% 70% / 60% 40% 60% 40%; gives a blob.
Frequently asked questions
How do I make a circle with CSS?
Give the element equal width and height and set border-radius: 50%.
How do I make a pill-shaped button?
Use a radius larger than half the height, for example border-radius: 999px.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, corner by corner. It lets each corner be elliptical instead of circular.
Why does my image ignore the radius?
Put the radius on the image itself, or add overflow: hidden to the rounded container so its contents are clipped.
Limitations
- Generates border-radius only; inverted (concave) corners need masks or clip-path and are not covered.
- No Tailwind class output.
Last reviewed November 9, 2026. How we build and test tools.