CSS property: `border-radius`

Description

The border radius.

It is a shorthand sets all four border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius and border-top-right-radius properties. If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Syntax

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?;

Values

<length>: Specifies the radius of a quarter ellipse that defines the shape of the corner of the outer border edge.
<percentage>: Specifies the radius of a quarter ellipse that defines the shape of the corner of the outer border edge.

Versions

CSS 3

Examples

h1 {
    background-color: #f00;
    border-radius: 10px;
}

border-radius: 4em;

/* is equivalent to */

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;