The Border Radius Generator rounds the corners of an element visually. Set a single radius for all four corners or control each corner independently, switch between pixels and percentages, and watch the shape update live before copying the CSS.
It is the fastest way to get the exact rounded-corner value you want — from a subtle 8px card to a full pill or circle — and copy it as plain CSS or a Tailwind class. Everything runs in your browser.
How to use the border radius generator
- Keep corners linked to round all four equally, or unlink them to set each corner separately.
- Choose pixels for fixed rounding or percent for rounding that scales with the element’s size.
- Adjust the values and watch the live preview.
- Copy the generated CSS (or Tailwind class) into your project.
Pixels vs percentages
A pixel radius is a fixed size regardless of the element — 12px is always 12px. A percentage radius is relative to the element’s dimensions, so 50% turns a square into a circle and a rectangle into a pill/stadium shape. Use px for consistent card and button rounding, and % when you want the corners to stay proportional as the element resizes.
Rounding each corner
The CSS border-radius shorthand takes the corners in the order top-left, top-right, bottom-right, bottom-left. Unlink the corners to create asymmetric shapes — for example rounding only the top corners of a card or bottom-sheet. This tool writes the shorthand for you and collapses it to a single value when all four corners match.
Frequently Asked Questions
How do I round only some corners?
Turn off “Corners linked” to control each corner independently, then set the top-left, top-right, bottom-left, and bottom-right values separately. The tool builds the correct border-radius shorthand.
When should I use % instead of px?
Use percent when you want the rounding to scale with the element — 50% makes a circle or pill — and pixels when you want a fixed, consistent radius regardless of size.
How do I make a circle or pill shape?
Set the radius to 50% with corners linked: a square becomes a circle and a rectangle becomes a pill. A large pixel value also creates a pill on shorter elements.
Can I copy it as a Tailwind class?
Yes. Switch the output to “Tailwind” to get a rounded-[…] arbitrary-value class (or per-corner classes when the corners differ).