CSS3 - Rounded Corner
CSS3 - Rounded Corner
- CSS3 rounded corner feature enables to insert a special colored corner to text or body by border-radius property in px(pixel) unit.
- This property is used with background color/image, padding, width and height.
Example :
<html>
<head>
<style>
#corn1 {
border-radius: 20px;
background: blue;
padding: 20px;
width: 150px;
height: 100px;
}
#corn2 {
border-radius: 20px;
border: 2px solid green;
padding: 20px;
width: 150px;
height: 100px;
}
#corn3{
border-radius: 20px;
background: url(Test.jpg);
background-position: right bottom;
padding: 20px;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<p id = "corn1">Example1</p>
<p id = "corn2">Example2</p>
<p id = "corn3">Example3</p>
</body>
</html>
Output :
