CSS Border Radius Generator
border-radius: 12px;The CSS border radius generator sets all four corners independently and prints the shorthand you need. When every corner matches it collapses to a single value; when they differ it writes the four-value form in clockwise order from the top left.
How it works
The shorthand takes one to four values. Understanding the order is what lets you read a rule at a glance rather than counting corners.
- One value applies to all four corners.
- Two values are top-left/bottom-right, then top-right/bottom-left.
- Four values run clockwise from the top left: top-left, top-right, bottom-right, bottom-left.
- A radius larger than half the element collapses to half, which is why 9999px reliably produces a pill.
Examples
A uniform radius
All corners
12px
Result
border-radius: 12px;
Because all four values are equal the tool writes the single-value shorthand rather than repeating 12px four times.
A speech-bubble corner
Top left
24px
Top right
24px
Bottom right
24px
Bottom left
0px
Result
border-radius: 24px 24px 24px 0px;
Three rounded corners and one square gives the tail anchor used in chat bubbles. The zero is the fourth value, so it applies to the bottom left.
Frequently asked questions
How do I make a perfect circle with border-radius?
Set the radius to 50% on an element with equal width and height. This tool works in pixels, so for a circle use 50% by hand, a pixel radius of half the width gives the same result only at that exact size, and breaks if the element resizes.
What does the slash syntax in some border-radius rules mean?
It separates horizontal and vertical radii, producing elliptical rather than circular corners, border-radius: 40px / 20px. This tool generates circular corners only, which covers the overwhelming majority of real use.
Why does a very large radius stop making a difference?
Because the browser reduces all radii proportionally when they would overlap, capping the effective value at half the element size. That is why the common 9999px trick reliably produces a pill shape at any width.