Border Radius Generator
Generate CSS border-radius for any corner with a live preview, presets and copy-ready code.
Presets & preview size
CSS
How it works
Drag the sliders (or type exact numbers) for each corner and the preview updates instantly
while the generated border-radius rule is written out below. Keep “Link all
corners” on for one value everywhere, or switch it off to round each corner differently.
Turn on “Elliptical corners” to give every corner a separate horizontal and vertical radius —
that is the border-radius: 30% 70% 40% 60% / 50% 40% 60% 50% syntax behind
organic “blob” shapes, and the Random blob preset rolls one for you.
The output is collapsed to the shortest valid CSS shorthand: four equal corners become a single value, and mirrored corners become two or three. Switch the unit between px, %, em and rem — percentages are relative to the element’s own width and height, so a 50% radius on a square gives you a perfect circle. Everything is generated by JavaScript in your browser; nothing is uploaded and there is no build step, so you can copy the rule straight into your stylesheet.
Frequently asked questions
How do I make rounded corners in CSS?
Add the border-radius property to the element, for example border-radius: 12px. Set the sliders above, then copy the generated rule into your stylesheet. One value rounds all four corners; four values set top-left, top-right, bottom-right and bottom-left in clockwise order.
How do I make a circle with border-radius?
Use border-radius: 50% on an element that is exactly as wide as it is tall. The Circle preset does this for you. Percentages are relative to the element's own width and height, so on a non-square box 50% gives an ellipse rather than a circle.
What does the slash in border-radius mean (blob shapes)?
The slash separates horizontal from vertical radii: border-radius: 30% 70% 40% 60% / 50% 40% 60% 50% gives each corner an elliptical curve. Turn on 'Elliptical corners' or hit Random blob to generate those organic shapes.