Border Radius Generator
Craft rounded and organic shapes with per-corner border radius control.
Top left
Radius24%
Top right
Radius24%
Bottom right
Radius24%
Bottom left
Radius24%
CSS
border-radius: 24%;
About Border Radius Generator
Border radius is deceptively deep: each corner takes two radii, and the eight-value shorthand that results is almost impossible to write by eye.
This generator exposes every corner independently with a live preview, offers a randomiser for organic blob shapes, and always shows the shortest valid shorthand for what you have built.
Frequently asked questions
What does the slash in the shorthand mean?
Values before the slash are horizontal radii and values after it are vertical radii, which is how you make elliptical rather than circular corners.
How do I make a circle?
Set every corner to 50% on a square element.
What are the organic blob shapes?
They come from mismatched horizontal and vertical radii on each corner, which produces the asymmetric shapes popular in modern illustration.