YouTipCss3 Border Radius
## 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 background color:
Rounded!
2. Rounded corners for an element with a border:
Rounded!
3. Rounded corners for an element 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;
}
[Try it yourself »](#)
* * *
## CSS3 border-radius — Specifying Each Corner Individually
If you specify only one value in the `border-radius` property, all four corners will be rounded equally.
However, if you want to specify each corner individually, you can use the following rules:
* **Four values:** The first value applies to the top-left corner, the second to the top-right corner, the third to the bottom-right corner, and the fourth to the bottom-left corner.
* **Three values:** The first value applies to the top-left corner, the second to both the top-right and bottom-left corners, and the third to the bottom-right corner.
* **Two values:** The first value applies to both the top-left and bottom-right corners, and the second to both the top-right and bottom-left corners.
* **One value:** All four corners have the same radius.
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 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 {
bor