border-radius: 24px;
Per-corner control
All corners24px
How to use
01
Pick unified or per-corner mode
By default one All corners slider rounds everything equally. Toggle the Per-corner control switch to reveal four separate sliders, one for each corner, when the design calls for asymmetry.
02
Drag until the preview looks right
Each slider covers 0 to 150px with the current value shown beside its label. The gradient square updates as you drag, so judge the shape by eye instead of guessing numbers.
03
Copy the one-line rule
The CSS pane shows border-radius with either a single value or four values in clockwise order starting top-left. Press the copy button and paste the declaration onto any element.
Why CSS Border Radius Generator
- Visual builder for unified or per-corner border radius.
- Live preview with realistic depth.
- Outputs clean CSS shorthand.
Common questions
What's the difference between unified and per-corner mode for rounding corners?
Unified mode writes a single value like border-radius: 24px that applies to all four corners. Per-corner mode writes the four-value shorthand, top-left, top-right, bottom-right, bottom-left in clockwise order, so something like 24px 0px 24px 0px gives you the leaf shape designers keep asking for.
Can this tool make organic blob shapes with border-radius?
It outputs the four-value pixel shorthand, which is the first half of the trick. Anyone hunting for a blob border radius generator really wants the eight-value slash syntax, four horizontal radii, a slash, four vertical radii, usually in percentages. Copy the four-corner output here, then extend it by hand with a slash and a second set of values.
Why do large corner radius values stop changing the shape?
Once a radius exceeds half of the element's shortest side, the browser clamps it so adjacent curves don't overlap. On the 192px preview square, anything past 96px on all corners renders as a circle. That's also why 9999px works as a lazy pill radius: the clamp does the math for you.
Does border-radius clip images and children inside the element?
Not by itself. The parent's corners round visually, but a child image with square corners will poke through them. Add overflow: hidden to the rounded parent, or apply a matching radius to the child, ideally slightly smaller so the curves nest cleanly.
Is a percentage radius different from the pixel values this tool outputs?
Yes. Percentages resolve against each dimension separately, so 50% on a rectangle produces an ellipse-cornered oval rather than a capsule. Pixel values, which these sliders emit, curve every corner by the same physical amount regardless of the element's proportions, which is usually what UI work needs.
Should I use border-radius or clip-path for angled corners?
Border-radius only draws curves. If the mockup shows a flat, beveled corner or any straight-edged cut, that's a polygon job for clip-path. A good rule: soft and rounded means radius, geometric and sharp means clipping.