CSS Border Radius Generator

Visually round any or all corners of a box and copy the exact border-radius CSS.

FreeBrowser-basedInstant
Corners
Unit
px

Your files are processed locally in your browser and are not uploaded to our servers. All generation happens instantly in your browser using plain JavaScript — nothing is sent to a server.

How to use CSS Border Radius Generator

Adjust each corner independently (or link them together for a uniform radius), and the live preview box updates instantly. Toggle between pixel and percent units, then copy the exact `border-radius` value — either the shorthand form when all corners match, or the full four-value form when they don't. Everything runs locally in your browser — nothing is uploaded or stored.

Key features

  • Independent control of all four corners, or linked for a uniform radius
  • Toggle between px and % units
  • Live preview box that updates instantly
  • One-click copy of the exact generated CSS
  • Randomize button for quick inspiration

Practical use cases

  • Rounding the corners of a card or button component
  • Creating a pill-shaped badge or tag
  • Building an asymmetric rounded shape for a decorative UI element
  • Quickly previewing how a radius value will look before committing it to code

Supported formats

Accepted: css-border-radius

Limitations

  • Does not support the CSS border-radius slash syntax for separate horizontal/vertical elliptical radii per corner

Frequently asked questions

Can I round each corner by a different amount?
Yes. Unlink the corners to set the top-left, top-right, bottom-right, and bottom-left radius independently, or keep them linked for a single uniform value applied to all four.
Can I use percentages instead of pixels?
Yes. Switch the unit toggle between px and % — percent is useful for a fully circular or pill-shaped element regardless of its size (e.g. 50% on a square box makes a circle).
How do I copy the generated CSS?
Click "Copy CSS" to copy the exact `border-radius` declaration to your clipboard, then paste it into your stylesheet.
Does this support elliptical corners (two radii per corner)?
No — each corner takes a single radius value, not the CSS border-radius slash syntax for separate horizontal/vertical elliptical radii.

Part of CSS Tools