CSS3 Rounded Corners

CSS3 Rounded Corners

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

Browser Support

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

The numbers before -webkit- or -moz- indicate the version that supports the respective 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.

Here are three examples:

1.Rounded corners for an element with a specified background color:

Rounded corners!

2.Rounded corners for an element with a specified border:

Rounded corners!

3.Rounded corners for an element with a specified background image:

Rounded corners!

Here's the code:

#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 only specify one value in the border-radius property, it will generate 4 rounded 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 both top-right and bottom-left corners, and the third value is for the bottom-right corner.
• Two values: The first value is for both top-left and bottom-right corners, and the second value is for both top-right and bottom-left corners.
• One value: All four corner values are the same.

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:

 

4.Here's 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

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

CSS3 Rounded Corners 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