Border
border-radius
border-radius rounds the corners of an element. It is a shorthand for all four corners, and a / lets you give corners different horizontal and vertical radii for an elliptical shape.
Syntax
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?Preview
Shorthand breakdown
border-radiusCode
.box {
background: #88d1c7;
border-radius: 48px 8px;
}Controls
About
How values map to corners
Values go clockwise from the top left (top-left → top-right → bottom-right → bottom-left), and missing ones are copied from the opposite corner.
- One value: every corner (
10px) - Two: top-left and bottom-right / top-right and bottom-left (
10px 40px) - Three: top-left / top-right and bottom-left / bottom-right (
10px 40px 0) - Four: top-left / top-right / bottom-right / bottom-left
The shorthand breakdown above shows how the value expands into each corner’s longhand.
Elliptical corners
Radii before the / are horizontal and radii after it are vertical, so 40px / 20px gives wide elliptical corners. In longhands such as border-top-left-radius you write the two radii separated by a space (40px 20px), not a slash.
Percentages are per axis
A horizontal radius is relative to the element’s width and a vertical radius to its height. That is why 50% on a rectangle gives an ellipse, not a circle. For a pill shape with semicircular ends, use a large length such as 9999px.
Oversized radii are scaled down
If the radii of two adjacent corners add up to more than the side’s length, all radii are scaled down by the same factor, so big values never break the shape. Resize the preview from its bottom-right corner to watch this happen.
What follows the curve
Backgrounds, borders and box-shadow follow the rounded corners. Content such as child elements does not: it pokes out of the corners unless you set something like overflow: hidden.