CSS3 Rounded Corners

CSS3 Rounded Corners

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

CSS3 Rounded Corner Generator

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers prefixed with -webkit- or -moz- indicate the first version that supported the prefixed version.

CSS3 border-radius Property

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

Here are three examples:

1. Rounded corners with a background color:

Rounded!

2. Rounded corners with a border:

Rounded!

3. Rounded corners with a background image:

Rounded!

The code is as follows:

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;
}

CSS3 border-radius - Specifying Each Corner

If you specify only one value for the border-radius property, it will apply to all four corners.

However, if you want to specify each corner individually, you can use the following rules:

• Four values: The first value is for the top-left corner, the second value is for the top-right corner, the third value is for the bottom-right corner, and the fourth value is for the bottom-left corner.

• Three values: The first value is for the top-left corner, the second value is for the top-right and bottom-left corners, and the third value is for the bottom-right corner.

• Two values: The first value is for the top-left and bottom-right corners, and the second value is for the top-right and bottom-left corners.

• One value: All four corners have the same value.

Here are three examples:

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

Rounded!

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

Rounded!

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

Rounded!

The source code is as follows:

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;
}

You can also create elliptical corners:

Example

CSS3 Rounded Corners Properties