How border radius generator works
The CSS border-radius property rounds the corners of an element. A single value like border-radius: 8px rounds all four corners equally; four values set them individually in the order top-left, top-right, bottom-right, bottom-left (a clockwise sweep starting at the top-left).
Units matter. Pixels (px) and em/rem give a fixed roundness, while percentages (%) are relative to the element's size: border-radius: 50% on a square element makes a perfect circle, and 50% on a wide rectangle makes a pill. This generator uses one shared unit across all corners.
Set the four corner values and pick a unit. The preview updates instantly with the generated border-radius applied, and the output is a ready-to-paste CSS declaration. When all four corners match, the shorthand collapses to a single value for tidier code.
Frequently asked questions
What is the border-radius shorthand order?
Four values go top-left, top-right, bottom-right, bottom-left. For example, border-radius: 10px 0 0 10px rounds only the left two corners. Two values set top-left/bottom-right then top-right/bottom-left; three values set top-left, top-right/bottom-left, then bottom-right.
How do I make a circle with border-radius?
Use border-radius: 50% on a square element (equal width and height). On a non-square rectangle 50% produces a pill/oval instead of a circle.
Can I use a different unit per corner?
This generator uses one shared unit across all four corners for a clean, predictable result. For mixed units (e.g. 10px 50%) you can copy the generated value and edit the unit of an individual corner by hand.
Why does the shorthand collapse to one value?
When all four corners are equal, border-radius: 8px is equivalent to border-radius: 8px 8px 8px 8px but shorter. The generator emits the single-value form in that case so your CSS stays tidy.
