CSS: Round Corners

border-radius Property

border-radius is a shorthand for the following properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Use border-radius to create round corners.

Here is a div element with round coners:

div {
border:solid thin grey;
border-radius:10px;
}

〔see CSS: Border〕

Example

100px × 100px square.

Rectangle example:

Different Radius for Each Corner

Border radius can be specified for some corners only. The order is:

border-radius:topLeft topRight bottomRight bottomLeft

Omitting border-radius Values

Any of the 4 values of border-radius values can be omitted.

border-radius:x is same as border-radius:x x x x

border-radius:x y is same as border-radius:x y x y

border-radius:x y z, is the same as border-radius:x y z y

Border Radius with Elliptical Corner

each border radius value can be a fraction, like this:

border-radius:50px/10px 0 0 0

The 50px specifies the horizontal radius of a Ellipse, the 10px is the vertical radius.

Examples:

Browser Support

All major browsers support it since 2012.