CSS border-radius: rounded corners, circles and organic blobs

One property does simple rounding, perfect circles, pill buttons and organic shapes.

From one value to four

border-radius: 12px rounds every corner by 12 pixels. Two values (12px 4px) set top-left and bottom-right to the first and top-right and bottom-left to the second. Three values and four values follow the clockwise order from the top left: top-left, top-right, bottom-right, bottom-left. Percentages refer to the size of the box: 50% on a square makes a circle.

Pills and circles

A pill-shaped button is border-radius: 999px (a number larger than half the height always works). A circle is border-radius: 50% on an element with equal width and height. On a rectangle, 50% makes an ellipse.

Elliptical corners and the slash

Each corner is really a quarter of an ellipse with a horizontal and a vertical radius. The slash form lists first the four horizontal radii and then, after /, the four vertical ones: border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%. When the two sets differ, you get stretched, organic corners: a blob. The generator on this site writes this form.

What happens when radii are too large

If two radii along one side add up to more than the length of that side, the browser scales all radii on the element down by the same factor until they fit. That is why, once you pass 100% total, moving a slider changes less than you expect.

Rounding and other properties

• A background or an image inside the element is clipped to the rounded shape only if overflow: hidden is set on the element (for children) or on the image itself.
• The corners are also where a click stops working: the square corner outside the curve does not receive clicks, since the browser follows the rounded shape.

Blob animations

Because border-radius can be transitioned or animated between two eight-value sets, you can morph a blob gently over many seconds. It repaints the shape each frame, so keep the element small and turn the animation off for visitors who asked for reduced motion.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.