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 |
Example
This property can have three values. The following example uses both the values −
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>
<p id="rcorners1">Rounded corners!</p>
<p id="rcorners2">Rounded corners!</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
It will produce the following result −
Each Corner property
We can specify the each corner property as shown below example
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
<body>
It will produce the following result −
No comments:
Post a Comment