Border Radius Generator
Adjust each corner with sliders and get the shortest equivalent CSS border-radius shorthand. Includes the 8-value blob (organic shape) syntax with a randomizer. The preview updates live and everything stays in your browser.
Examples (click to try)
Mode
Unit
How to use
In Corners mode, four sliders control the top-left, top-right, bottom-right and bottom-left radii. The output is automatically collapsed to the shortest equivalent shorthand — one value when all corners match, two when the diagonals match, and so on. Switch between px and %, and turn on "Link all corners" to move all four with a single slider. Blob (8 values) mode builds the slash-separated syntax with four horizontal and four vertical radii; hit the randomizer to explore organic shapes.
Examples
- All four corners 12px →
border-radius: 12px;(collapsed to one value) - Top-left & bottom-right 10px, top-right & bottom-left 20px →
border-radius: 10px 20px;(diagonals match, two values) - Top corners 24px, bottom corners 0 →
border-radius: 24px 24px 0px 0px;(tab-like top rounding) - Unit % with all corners 50 →
border-radius: 50%;(a perfect circle on a square element) - Blob default →
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
FAQ
Is my data sent to a server?
No. Everything runs in your browser; nothing is transmitted or stored externally.
In what order are the four values applied?
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. When values are omitted, CSS reuses the diagonal corner's value, and this tool automatically shortens the output to the shortest equivalent form (1 to 4 values).
When should I use px vs %?
px gives a fixed rounding that ignores the element's size — good for cards and buttons. % is relative to the element's width and height, so it scales with the element; 50% on a square element makes a perfect circle.
What is the blob (8-value) mode?
A slash-separated CSS syntax that sets four horizontal and four vertical radii independently. The corners become asymmetric, producing organic blob shapes. The randomize button is a handy way to explore shapes.