CSS Border Radius Generator
Visually edit each corner of border-radius. Simple mode rounds each corner with a single value; advanced mode lets you set separate horizontal and vertical radii to create elegant "fancy" blob shapes.
How to Use
Simple = one slider per corner. Advanced = horizontal + vertical sliders per corner for elliptical curves.
Drag the 0–100% sliders; the preview updates live. Use "Match all" to set all four corners to the same value.
Copy the CSS in shorthand (`border-radius: 50%`) or longhand (`border-top-left-radius: …`) form.
FAQ
How is the shorthand parsed?
`border-radius: A B C D` = top-left, top-right, bottom-right, bottom-left (clockwise). With a slash (`/`), the values before are horizontal radii and after are vertical: `border-radius: 50% 50% 50% 50% / 30% 30% 30% 30%`.
px vs % ?
px is absolute. % is relative to the element's width (horizontal radius) and height (vertical radius). 50% gives a capsule on rectangles and a circle on squares — % adapts to size, which is why this tool uses %.
What's "fancy" / elliptical mode?
Setting separate horizontal and vertical radii per corner produces asymmetric "blob" shapes — elegant for cards. Example: `50% 30% 70% 40% / 60% 40% 50% 30%`.
What about values over 50%?
At 50% the rounding reaches the midpoint of each side. At 100% it reaches the full side length. With all corners ≥ 50%, you get circles/ellipses. If radii overlap, browsers scale them proportionally per the CSS spec.
Is anything sent to a server?
No. All processing happens in your browser; nothing leaves the page.
