Home / Design / Border Radius Generator
Border Radius Generator
Shape each corner on its own — including elliptical corners for organic blob shapes — and copy the CSS.
The slash syntax: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% sets horizontal radii before the slash and vertical radii after it, which is what makes smooth organic “blob” shapes possible. Use 50% on a square for a perfect circle, or a very large px value like 999px for pill-shaped buttons.
About the Border Radius Generator
The CSS Border Radius Generator shapes each corner of an element individually in pixels or percentages, or switches to organic blob mode with eight values for smooth, irregular shapes. Randomise for inspiration, preview at any size and copy the border-radius CSS for buttons, cards, images and decorative blobs.
How to use the Border Radius Generator
- Choose corners mode or organic blob mode.
- Set each corner, or use the same value for all.
- Randomise the blob or adjust the preview size.
- Copy the CSS.
Frequently asked questions
How do I make a circle with border-radius?
Give a square element border-radius: 50%.
What are the eight values in a blob shape?
Each corner can have a separate horizontal and vertical radius, written as four values, a slash and four more. That creates smooth, egg-like curves.
Should I use px or % for border radius?
Pixels keep corners the same size whatever the element’s size. Percentages scale with the element, which suits circles and blobs.