Border Radius Generator

How to use it

1. Drag the four sliders to set the top-left, top-right, bottom-right and bottom-left radii.
2. Switch the unit between px, percent and rem depending on your layout.
3. Watch the preview box reshape as you drag.
4. Copy the CSS - equal corners are merged into the shortest valid shorthand.

Common use cases

• Designing card and button styles - find the radius that fits your component scale before touching code.
• Learning the shorthand - see how 1, 2, 3 and 4 value forms map to the four corners.
• Matching a mockup - recreate a radius from a design file and hand the exact CSS to your team.
• Building pill shapes - push the percent unit to 50% for fully rounded sides.

Why it stays private

The preview is a plain DOM element restyled locally; there is nothing to upload and nothing to send.

FAQ

Q: How does the shorthand merging work? A: Four equal corners collapse to one value; equal diagonals collapse to two (top-left/bottom-right and top-right/bottom-left); a matching top-right and bottom-left collapses the fourth value. Everything else stays as four values.

Q: Why does 50% look different from 50px? A: Percent radii scale with the box edges, so a 50% radius on a wide rectangle turns it into a pill, while a fixed px value stays the same absolute size regardless of the box.

Q: Are elliptical radii (the slash syntax) supported? A: No, this tool produces the single-radius form only. If you need separate horizontal and vertical radii, extend the copied CSS by hand.