Border Radius Generator
Round each corner independently and copy the CSS.
How this border radius tool works
Enter a radius for each corner — top-left, top-right, bottom-right and bottom-left. Enable "link corners" to change all four at once. The shorthand CSS output follows the standard clockwise order, so it stays readable in your stylesheet.
The blob presets use CSS's slash syntax, which sets the horizontal and vertical radii separately. That is how you get organic, asymmetrical shapes — the trick behind most modern "blob" avatars and hero illustrations. Combine a large radius like 60% with a moderate size for the smoothest results.
Values above 50% of the box size clamp automatically in CSS, so you can experiment freely without breaking the layout.
FAQ
What does the slash syntax mean?
border-radius: 60% 40% / 30% 50% sets horizontal radii (60%, 40%) and vertical radii (30%, 50%) separately. Each corner gets an elliptical curve instead of a circular one, which produces organic shapes.
Why is my large radius not working?
Radii larger than half the element's size get scaled down proportionally by the browser. If corners look identical despite different values, your values are all above the clamp threshold — reduce them.
Can I round only some corners?
Yes — set the corners you want to 0. For example, a card with only the top corners rounded uses border-radius: 16px 16px 0 0.