CSS3 Rounded Corners
CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows −
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000
padding: 20px;
width: 200px;
height: 150px;
}
The following table shows the possible values for Rounded corners as follows −
| Values |
Description |
| border-radius |
Use this element for setting four boarder radius property |
| border-top-left-radius |
Use this element for setting the boarder of top left corner |
| border-top-right-radius |
Use this element for setting the boarder of top right corner |
| border-bottom-right-radius |
Use this element for setting the boarder of bottom right corner |
| border-bottom-left-radius |
Use this element for setting the boarder of bottom left corner |
This property can have three values. The following example uses both the values −
See this example:
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #DD4E41;
color:#fff;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #DD4E41;
padding: 20px;
color:#fff;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners1">Rounded corners!</p>
<p id="rcorners2">Rounded corners!</p>
</body>
</html>
Output:
Rounded corners!
Rounded corners!
We can specify the each corner property as shown below example
Each Corner property
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #DD4E41;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #DD4E41;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #DD4E41;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
<body>
Output:
