Border Radius Generator
Craft rounded and organic shapes with per-corner border radius control.
Top left
Top right
Bottom right
Bottom left
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.
How Border Radius Generator works in your browser
Each corner takes a horizontal and a vertical radius. When they match, the corner is circular; when they differ, it becomes elliptical, which is how organic "blob" shapes are made. The generator writes the eight values as the border-radius shorthand, using the slash to separate horizontal and vertical radii.
It always outputs the shortest shorthand that produces the same shape, so the CSS stays readable.
When to use it
- Rounding only the top corners of a card or tab.
- Generating an irregular blob shape for an illustration or avatar mask.
- Turning a square element into a circle or pill.
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.