CSS: Round Corners

Border-radius property

Use border-radius to create round corners.

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

.xround-yrncf {
 width: 100px;
 height: 100px;
 border: solid 3px grey;
 border-radius: 10px;
 padding: 8px;
}

Example

Example. circle

use 50% to make it circle, for any square size.

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.

2 values (topleft bottomright, topright bottomleft)

border-radius: x y

is same as

border-radius: x y x y

3 values (topleft, topright bottomleft, bottomright)

border-radius: x y z

is the same as

border-radius: x y z y

Example. left bracket for quote

.quote-bracket-234 {
 all: revert;
 border-left: solid 2px red;
 border-top-left-radius: 8px;
 border-bottom-left-radius: 8px;
 padding-left: 8px;
 margin-left: 16px;
}

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.

Example

.br-frac-448 {
 border: solid 3px grey;
 border-radius: 50px/10px;
 width: 100px;
 height: 100px;
 margin: 10px;
}

.br-frac-174 {
 border: solid 3px grey;
 border-radius: 50px/10px 0 0 0;
 width: 100px;
 height: 100px;
 margin: 10px;
}

Browser support

All major browsers support it since 2012.