CSS Border Radius Generator
Round corners with a live preview and the shortest CSS: one value when every corner matches, four when none do, elliptical corners when you need an egg.
Enable JavaScript to change the corners; the CSS below is for the defaults.
One radius for the lot, or a value per corner.
Percent is relative to the element's own size, so a square at 50% becomes a circle.
16px
.your-element {
border-radius: 16px;
}Round the corners you want rounded, watch a real element change, and copy the shortest CSS that says it.
How to use
- Start with one radius for all four corners. Most designs need nothing else.
- Switch to per-corner when a shape asks for it: a speech bubble, a tab, a card that sits against an edge.
- Choose the unit. Pixels are predictable, percent is relative to the element’s own size, and rem scales with the root font size.
- Turn on elliptical corners when a corner should be wider than it is tall. The second set of radii is written after a slash.
- Copy the declaration. The values are collapsed the way a person would write them: one value when the corners match, two when the diagonals do.
Example
.your-element {
border-radius: 24px 24px 0 8px;
}That is the order CSS uses: top left, top right, bottom right, bottom left, clockwise from the top left. Two matching diagonals collapse to two values, and four matching corners to one.
Pitfalls
- Percent is relative to the element’s own width and height, so a rectangle at 50% gets an ellipse, not a circle. For a circle you need a square element.
- A radius larger than half the element is reduced by the browser, all corners in proportion. That is why 9999px gives a pill rather than an error.
- The radius rounds the border box. With a border, the inner edge has a smaller radius, which is what makes a thick border look slightly off at the corner.
overflow: hiddenis what clips a child image to the radius. Without it the image keeps its own square corners over the rounded parent.- A background image is clipped by the radius; an outline is not. Use a border, or
outline-offset, if a focus ring is escaping the shape. - Rounded corners on a transformed element are painted before the transform, so a scaled element’s radius scales with it.
- Very large radii on a non-square element produce a shape browsers compute differently in the last percent. Test at the sizes you actually ship.
- Nested rounded boxes need the inner radius reduced by the padding, or the corners look concentric but are not. The usual rule is inner = outer minus the gap.
Compatibility
border-radius is supported unprefixed by every browser in use, since 2011. The slash syntax for elliptical corners is part of the same specification and equally well supported. Percentage radii behave the same everywhere; the only differences appear when a radius is larger than the box, where the reduction algorithm is specified but rounding differs by a fraction of a pixel. The tool runs entirely in your browser.
Frequently asked questions
How do I make a circle?
border-radius: 50%. On a rectangle, 50% gives an ellipse.How do I make a pill?
9999px is the usual trick, and the browser reduces it for you.Why is my image still square?
overflow: hidden to the parent, or the same radius to the image.