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.

The numbers prefixed with -webkit- or -moz- specify the first version that supported the prefixed property.

CSS3 border-radius Property

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

Here are three examples:

1. Element with rounded corners and a background color:

Rounded Corners!

2. Element with rounded corners and a border:

Rounded Corners!

3. Element with rounded corners and a background image:

Rounded Corners!

Here is the code:

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 are rounded equally.

Here are three examples:

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

Rounded Corners!

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

Rounded Corners!

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

Rounded Corners!

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

You can also create elliptical corners:

Example

CSS3 Rounded Corners Properties