Border Radius Generator
Visually build and copy CSS border-radius code
About Border Radius Generator
Visually builds a CSS border-radius effect, with the option to link all four corners together or adjust each independently, and generates the corresponding CSS code.
Adjust each corner's radius using the sliders, with a live preview showing the result, then copy the generated CSS. Turn on Elliptical corners to give each corner a separate horizontal and vertical radius (CSS writes these with a slash), or press Blob shape for an organic starting point. Switching to % lowers any radius above 50% to 50% and tells you which.
Uneven, independently-set corner radii can create a distinctive "blob" or organic shape effect that's become a popular design trend — worth experimenting with unlinked corners rather than just a uniform rounded rectangle.
Watch: Border Radius Generator in Action
- Can I set each corner independently instead of matching them all?
- Yes — unlink the corners to adjust each one independently, which can create a distinctive "blob" or organic shape effect that's become a popular design trend, rather than just a uniform rounded rectangle.
- What order are the four border-radius values in?
- Clockwise from the top left: top left, top right, bottom right, bottom left. Equal values are shortened, so 10px 20px means top left and bottom right are 10px and the other two are 20px.
- Should I use px or %?
- Pixels give the same curve at any size. Percentages follow the box, so 50% on a square makes a circle. Percent radii in this tool go up to 50%, so switching from px lowers any larger value to 50% and tells you which corners changed.
- How do I make a blob shape?
- Press Blob shape for an elliptical starting point, then move the sliders. Elliptical corners have a horizontal and a vertical radius, which CSS writes as horizontal values, a slash, then vertical values.
- Why does a huge radius like 9999px make a pill?
- CSS never lets the curves on one side add up to more than that side's length, so it scales them down until they just fit. On a wide, short box that leaves fully rounded ends, a pill. This tool's sliders stop at 200px, so type 9999px into your own CSS for that effect.
More from Design & Color: