How to use the border radius generator
- Choose Corners for normal rounding, or Organic blob for free-form shapes.
- In Corners mode, unlink to set each corner on its own, and pick px or %.
- In blob mode, move the edge sliders or press New blob for a random shape.
- Copy the border-radius CSS or the Tailwind class.
The slash syntax
border-radius accepts two sets of values separated by a slash: horizontal radii before it, vertical radii after. border-radius: 62% 38% 54% 46% / 41% 59% 37% 63% gives each corner an elliptical curve, which is how CSS draws blob shapes without SVG.
Matching nested corners
When a rounded element sits inside another with padding, subtract the padding from the outer radius: an outer radius of 24px with 8px padding needs an inner radius of 16px for the curves to look parallel.
Questions
How do I make a perfect circle?
Give a square element border-radius: 50%. For pill buttons, use a large pixel value such as 999px.
In what order are the four values?
Top left, top right, bottom right, bottom left: clockwise from the top left.