Advertisement
Guide
About the Border Radius Generator
Rounded corners are one of the most-used touches in modern interfaces, and the CSS border-radius property controls them. It can round all four corners equally or each one independently, and it accepts pixels or percentages. This generator lets you set each corner with a slider, see the shape update live, and copy the correct shorthand.
Whether you want a subtly rounded card, a pill-shaped button, or a full circle, you can dial it in visually instead of guessing values. Everything runs in your browser.
Pixels vs. percentages
A pixel radius is a fixed curve regardless of element size — 8px looks the same on a small and large box. A percentage is relative to the element's dimensions, so 50% turns a square into a circle and a rectangle into a pill. Use pixels for consistent, subtle rounding and percentages for shapes that should scale with the element.
Making circles and pills
Setting border-radius: 50% on a square element produces a perfect circle — the basis of round avatars and icon buttons. On a wider element, a large radius (or a very high pixel value) creates a pill shape with fully rounded ends, common for tags and toggle buttons. The live preview makes it easy to find the exact look.
How to use it
- 1Adjust the radius for all corners together, or set each corner individually.
- 2Switch between px and % units as needed.
- 3Watch the preview to get the exact shape you want.
- 4Copy the border-radius shorthand into your CSS.
Frequently asked questions
How do I make a circle with border-radius?
Apply border-radius: 50% to a square element (equal width and height). The corners round fully and meet in a perfect circle.
What is the difference between px and % radius?
A pixel radius is a fixed curve regardless of size, while a percentage is relative to the element, so 50% always produces a circle or pill depending on the element shape.
Can I round only some corners?
Yes. Set each corner independently — for example rounding only the top two corners of a card — and copy the resulting shorthand.
How do I make a pill-shaped button?
Use a large radius on a wider-than-tall element; a high value fully rounds the short ends into a pill.
Is the CSS generated locally?
Yes. The preview and shorthand are produced entirely in your browser.