Border Radius Generator
Generate border radius
Generate border radius Runs locally in your browser
border-radius: 12px;
About the
The Border Radius Generator sets the four corners of a box independently, with a live preview, and gives you the CSS. The order of the shorthand is the thing everyone forgets: it is top left, top right, bottom right, bottom left, going clockwise from the top left. One value applies to all four corners, two values apply to the diagonal pairs, and four values address each corner in turn. When all four match, the tool emits the single-value form, which is the one you actually want most of the time.
Where people use the
- Matching a radius to a design spec without guessing at pixel values.
- Rounding only the top corners of a card or a modal.
- Shaping a pill button, which is a radius of half the element height.
- Finding the radius that turns a square avatar into a circle.
How to use the
- 1
Drag a corner slider
Each corner has its own slider from 0 to 150 pixels. The preview box rounds as you move it.
- 2
Keep the corners linked or unlink them
With Link on, moving any slider moves all four together. Turn it off to shape individual corners, which is how you make a speech-bubble tail or a leaf shape.
- 3
Read the CSS
If all four match you get the single-value shorthand. If they differ you get the full four-value form in clockwise order.
- 4
Consider a percentage instead
A radius of 50 percent on a square element gives a circle. Swap the px unit for a percentage in your stylesheet if that is what you need.
Tips and best practices
- Use percentages when the element resizes, pixels when it does not.
- A pill button is not a fixed radius; it is half the height, so 9999px is the lazy but robust answer.
- Keep the radius consistent across a component set; mixing 4px, 6px and 8px looks accidental.
Frequently asked questions
What order are the four values in?
Clockwise from the top left: top left, top right, bottom right, bottom left. A useful mnemonic is that it starts where you start reading and goes around like a clock face.
What do two or three values mean?
Two values set the diagonals: the first is top left and bottom right, the second is top right and bottom left. Three values set top left, then top right and bottom left together, then bottom right.
How do I make a circle?
Use 50 percent on an element that is already square. Using pixels only gives a circle if the radius happens to equal half the width, which breaks the moment the element resizes.
Can I round corners differently horizontally and vertically?
The full syntax allows an elliptical radius written as horizontal values, a slash, then vertical values. This tool emits the simpler uniform form, so add the slash version by hand if you need that shape.
Why is my rounded corner clipped?
Because the child content is not clipped to the rounded box. Add overflow hidden to the element, or the image or background inside it will still show square corners.