CSS toolsBorder radius generator
CSS Border Radius Generator
Set one radius for all corners or untick the link and shape each corner on its own: this CSS border radius generator rounds the preview as you go and writes the shortest border-radius rule that means the same, in pixels or percent.
How to use the border radius generator
Keep "Same for all corners" ticked and move any slider to round the whole box evenly.
Untick it to give each corner its own radius, for tabs, chat bubbles or leaf shapes.
Switch between pixels and percent. Percent radii follow the size of the element.
Copy the border-radius line. The generator already shortened it for you.
How the border-radius shorthand works
The CSS border-radius property accepts one to four values, read clockwise from the top left corner. One value rounds every corner the same. Two values pair opposite corners: 24px 8px means 24px top-left and bottom-right, 8px top-right and bottom-left. Three values set top-left, then top-right with bottom-left, then bottom-right. Four values set each corner in order.
The generator checks which of these forms fits your four corners and prints the shortest one. If you would rather name a single corner in your stylesheet, the longhand properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.
Rounded corners in pixels or percent
A pixel radius stays the same however big the element gets, which keeps buttons and cards consistent across a design. A percent radius is measured against the element's own width (for the horizontal curve) and height (for the vertical one), so 50% turns a square into a circle and a rectangle into an ellipse. When two neighbouring corners ask for more than the side is long, the browser scales all the radii down until they fit, which is why a very large pixel value gives a clean pill shape.
Questions
- How do I make a perfect circle with border-radius?
- Give a square element border-radius: 50%. On a rectangle 50% gives an ellipse; for pill-shaped buttons use a large fixed value such as border-radius: 999px instead.
- What is the order of the four values?
- Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. With two values the first is for top-left and bottom-right, the second for the other two corners.
- Why does the image inside my rounded box still have square corners?
- border-radius rounds the box, but children can still paint over the corners. Add overflow: hidden to the rounded box, or give the image the same border-radius.
- What does the slash in border-radius mean?
- Values after a slash set the vertical radius of each corner, so a corner can be elliptical: border-radius: 50% / 30% gives a flatter curve. Mixed values like this are how CSS blob shapes are made.