CSS: Round Corners

By Xah Lee. Date: . Last updated: .

border-radius is a shorthand for the following properties:

Use border-radius to create round corners.

Here is a div element with round coners:

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

[see CSS: Border]

Examples

100px × 100px square.


border-radius:
0px

border-radius:
10px

border-radius:
20px

border-radius:
30px

border-radius:
40px

border-radius:
50px

Rectangle example:

border-radius: 50px

Specifying Different Radiuses for a Corner

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

border-radius:topLeft topRight bottomRight bottomLeft


border-radius:50px 0 0 0

border-radius:0 50px 0 0

border-radius:0 0 50px 0

border-radius:0 0 0 50px

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:30px

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


border-radius:50px 20px

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


border-radius:50px 20px 10px

Border Radius with Elliptical Corner

For each border radius value, it 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.

css border-radius ellipse illustration
border-radius:55pt/25pt (image source)

Examples:


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

border-radius:50px/10px

Browser Support

All major browsers support it since 2012.