Design · 3 min read
CSS border-radius: Beyond Simple Rounded Corners
border-radius: 8px rounds every corner. But the property can do much more — pills, circles, leaf shapes, and wobbly blobs — once you know its full syntax.
Try it yourself with the related tool.
Shape a border-radius →Advertisement
The shorthand
Up to four values go clockwise from the top-left: border-radius: 16px 4px 16px 4px. Two values pair opposite corners. Individual corners use longhands such as border-top-left-radius.
Circles and pills
border-radius: 50% turns a square into a circle and a rectangle into an ellipse. For a pill-shaped button whose ends are always perfect semicircles, use a very large fixed value such as 9999px — percentages would make it an ellipse instead.
Elliptical corners and blobs
Each corner can have different horizontal and vertical radii. The slash syntax sets them: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. Values like these create organic blob shapes, and animating between two such values makes the blob morph.
Nested corners
When a rounded element sits inside another with padding, the inner radius should be the outer radius minus the padding. Using the same radius for both makes the gap look uneven at the corners.