CSS Property: border-radius
Rounded corners.
Specifies the radius of a quarter circle or ellipse that forms the corners of the outer-edge of the border area of a box. It is a general corner-rounding property and does not actually require a border for it to take effect.
A shorthand property that combines border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
Possible Values
| Value | Note | Example |
|---|---|---|
| [length] | Uniform circle radius for every corner. | 1em |
| [percentage] | Uniform ellipse radius for every corner. Horizontal radius is calculated as a percentage of the border box’s width. Vertical radius is calculated as a percentage of the border box’s height. | 50% |
| [value] [value] | First value is top-left and bottom-right corners. Second value is top-right and bottom-left corners. | 10px 20px |
| [value] [value] [value] | First value is top-left corner. Second value is top-right and bottom-left corners. Third value is bottom-right corner. | 10px 20px 30px |
| [value] [value] [value] [value] | First value is top-left corner. Second value is top-right corner. Third value is bottom-right corner. Fourth value is bottom-left corner. | 10px 20px 30px 40px |
[values] / [values] | First set of values specifies horizontal radii. Second set of values specifies vertical radii. | 10px 20px / 5px 10px |
inherit | ||
initial | ||
unset | ||
Example
.box1 { border-radius: 10px; }
/* Corners have rounding made from a circle with a radius of 10 pixels. */
.box2 { border-radius: 10px 20px; }
/* Top-left and bottom-right corners have rounding made from a circle with a radius of 10 pixels.
Top-right and bottom-left corners have rounding made from a circle with a radius of 20 pixels. */
.box3 { border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
/* Top-left corner has rounding made from an ellipse with a horizontal radius of 10 pixels and a vertical radius of 5 pixels.
Top-right corner has rounding made from an ellipse with a horizontal radius of 20 pixels and a vertical radius of 10 pixels.
Bottom-right corner has rounding made from an ellipse with a horizontal radius of 30 pixels and a vertical radius of 15 pixels.
Bottom-left corner has rounding made from an ellipse with a horizontal radius of 40 pixels and a vertical radius of 20 pixels. */