Quick answer: CSS border-radius rounds the corners of a box. A single value rounds all four corners equally; four values round each corner separately in clockwise order starting from the top-left. A percentage radius scales with the box, so a square element with a 50% radius becomes a perfect circle.
CSS border-radius rounds the corners of a box, and it accepts up to four separate values, one per corner, in a specific order: top-left, top-right, bottom-right, bottom-left. Typing four numbers by hand and checking the result is slow. This tool shows the shape live as you drag the sliders.
Leave "same radius on all corners" on for a simple pill or rounded card shape, or turn it off to round only some corners, useful for chat bubbles, tabs and asymmetric cards.
How the four corners are ordered
When border-radius has four values, CSS always reads them clockwise starting from the top-left corner:
A single value, such as border-radius: 12px, applies to all four corners at once. Using a percentage instead of pixels scales the curve with the box's own size, which is how perfect circles and pills are made: a square box with border-radius: 50% becomes a circle.
Common border-radius shapes
- Rounded card: a small radius like 8px to 16px on all corners.
- Pill / fully rounded button: set the radius to 50% (or half the box's height in pixels).
- Circle: an equal-width-and-height box with 50% radius on all corners.
- Chat bubble / tab shape: round three corners and leave one corner at 0, by unlocking the corners.
A worked example
Example. A rounded card uses border-radius: 16px; on all corners. A chat bubble pointing from the bottom-left might use border-radius: 16px 16px 16px 0px;, leaving the bottom-left corner square.
Real-world examples
A profile picture uses a 50% border-radius on a square image to display it as a perfect circle.
A chat bubble rounds three corners generously and leaves the corner nearest the sender's avatar square, so the shape visually points toward who sent it.
Common mistakes to avoid
- Expecting a single radius value to round only one corner. A single value always applies to all four; use four separate values to round corners differently.
- Mixing up the four-value order. It is always clockwise from the top-left, not left-to-right or random.
- Trying to make a circle with a fixed pixel radius on a non-square box. A true circle needs equal width and height with a 50% radius.
Frequently asked questions
How do I make a perfect circle with CSS?
Give the element equal width and height, then set border-radius to 50%. A percentage radius scales with the box, so an equal-sided box becomes a perfect circle.
What order are the four border-radius values in?
Clockwise starting at the top-left: top-left, top-right, bottom-right, bottom-left. This tool labels each slider so you do not need to memorize the order.
Can I use percent and pixels together?
Each border-radius declaration uses one unit for all four corners you set numerically, though CSS does allow mixing px and % for the horizontal and vertical radius of a single corner using a slash syntax, which is beyond what this tool generates.
Does border-radius work on background images too?
Yes. border-radius clips anything inside the box, including a background image or a child element, as long as overflow is not set in a way that disables clipping.
People also search for this as: border radius generator, css border radius calculator, rounded corners css generator, css corner radius tool, round corners css, border radius css code.
Sources and further reading
Formulas on this page are checked by automated tests against independent references. See how we test our tools.