Set each corner independently and watch the shape update live - great for organic "blob" shapes too.
How it works
Each slider controls one corner independently, and the four percentages are combined in CSS's own corner order — top-left, top-right, bottom-right, bottom-left — into a single border-radius shorthand value applied live to the preview box.
FAQ
Why are there four separate percentages instead of one border-radius value?
Because CSS border-radius accepts a value per corner — top-left, top-right, bottom-right, bottom-left, in that clockwise order — and setting them unevenly is exactly what creates organic 'blob' shapes instead of a uniform rounded rectangle.
Why percent instead of pixels?
Percentages scale with the element's own width and height, so the same blob shape stays proportional if the element is resized — a fixed pixel radius wouldn't adapt the same way.
Free, unlimited, no account. If this saved you a paid tool, a small thanks is appreciated.