CSS Border Radius Generator

Round element corners visually and copy the CSS border-radius. Tune each corner with a live preview. Runs client-side.

Runs in your browser — nothing uploaded
24px
24px
24px
24px
CSS
border-radius: 24px;

Drag the sliders to shape each corner, then copy the ready-to-paste CSS. Everything renders in your browser.

Round the corners of any element visually and copy the exact CSS. Adjust all four corners together or independently, switch between pixels and percentages, and watch the live preview update instantly. Everything runs in your browser.

Private by design — your data never leaves your device

How to use it

No account, no upload — it all happens on your device.

1
Drag the corner sliders to shape the preview.
2
Toggle 'Link all corners' to edit them together or separately.
3
Switch between px and % units as needed.
4
Copy the generated border-radius CSS.

Understanding the shorthand

How one line controls four corners.

border-radius accepts one to four values. One value rounds every corner the same. Four values follow a clockwise order starting at the top-left: border-radius: 10px 20px 30px 40px; sets top-left, top-right, bottom-right, then bottom-left. This tool collapses to a single value automatically when all corners match.

Handy recipes

  • Circle: a square element with border-radius: 50%.
  • Pill button: a wide element with a large pixel radius like 999px.
  • Card: a gentle 8px–16px on all corners.

Frequently asked

What does border-radius do?
The CSS border-radius property rounds the corners of an element. A single value rounds all four corners equally; four values set the top-left, top-right, bottom-right, and bottom-left corners in that clockwise order.
Should I use px or %?
Pixels give a fixed corner size regardless of element dimensions. Percentages scale with the element — 50% on a square makes a perfect circle, which is why it's popular for avatars and pills.
Is anything uploaded?
No. The preview and the generated CSS are produced entirely in your browser. Nothing you enter is sent to a server.

Related tools

JSON Formatter & BeautifierFormat, beautify, and validate JSON instantly in your browser. Your data never leaves your device.JWT Decoder & VerifierDecode and verify JSON Web Tokens (JWT) in your browser. HS256, RS256, ES256 supported. Tokens and keys never leave your device.Base64 Encoder & DecoderEncode text to Base64 or decode Base64 back to text instantly in your browser. Unicode-safe. Nothing is uploaded.