CSS3 Border Radius

CSS3 Rounded Corners

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

CSS3 Border Radius Generator

Browser Support

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

The number before -webkit- or -moz- indicates the first version that supports the 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 create "rounded corners" for any element.

The following are three examples:

1. Rounded corners for elements with a specified background color:

rounded corners!

2. Specifying rounded corners for element borders:

rounded corners!

3. Rounded corners for elements with a specified background image:

rounded corners!

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

Try it Yourself »

CSS3 border-radius - Specify each rounded corner

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

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

  • Four values:The first value is the top-left corner, the second is the top-right corner, the third is the bottom-right corner, and the fourth is the bottom-left corner.
  • Three values:The first value is the top-left corner, the second is the top-right and bottom-left corners, and the third is the bottom-right corner.
  • Two values:The first value is the top-left and bottom-right corners, and the second is the top-right and bottom-left corners.
  • One value:The four corner radius values are the same

The following 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 Yourself »

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 Yourself »

CSS3 border-radius properties

Property Description
border-radius Shorthand for all four border-*-*-radius properties.
border-top-left-radius Defines the radius of the top-left corner
border-top-right-radius Defines the radius of the top-right corner
border-bottom-right-radius Defines the radius of the bottom-right corner
border-bottom-left-radius Defines the radius of the bottom-left corner
other extensions