CSS information

Standards information

Remarks

As of Microsoft Edge, "-webkit-border-radius" is supported as an alias for this property.

The border-radius property is a composite property that specifies up to four border-*-radius properties. If values are given before and after the slash, the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, the values set both radii equally.

If the bottom-left value is omitted, the value is the same as the top-right value. If the bottom-right value is omitted, the value is the same as the top-left value. If the top-right value is omitted, the value is the same as the top-left value.

Examples

Following is an example of a typical use for the border-radius property. Because there are two values after the border-radius property, the first value is the radius of the circle that defines the top-left and bottom-right corners of the element, and the second value is the radius of the circle that defines the top-right and bottom-left corners of the element.