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>
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>
Posts
0 Comments