CSS3 Rounded Corners

Browser support

The numbers in the table represent the version number of the first browser to support the property.

The number preceding -webkit- or -moz- indicates the first version that supports that prefix.

Property
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS3 border-radius property

Using the CSS3 border-radius property, you can make "rounded corners" for any element.

Here are three examples:

1. Element rounded corners with a specified background color:

Rounded corners!

2. Specify the element rounded corners of the border:

Rounded corners!

3. Specify the element rounded corners of the background image:

Rounded corners!

The codes show as below:

Example

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px ;
    height: 150px;
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

 Try It! 

CSS3 border-radius - specifies each rounded corner

If you specify only one value in the border-radius property, then 4 rounded corners will be generated.

However, if you want to specify each of the four corners, you can use the following rules:

• Four values: The first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.

• Three values: The first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner

• Two values: The first value is the upper left corner and the lower right corner, the second value is the upper right corner and the lower left corner

• One value: The four rounded corners have the same value

Here are three examples:

1. Four values - border-radius: 15px 50px 30px 5px:

2. Three values - border-radius: 15px 50px 30px:

3. Two values - border-radius: 15px 50px:

The following is the source code:

Example

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

 Try It! 

You can also create elliptical corners:

Example

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

 Try It! 

CSS3 rounded corner property