Author: Unknown |
18:45 |
|
Once upon a time all the web developers do lot of work to create rounded corners. Sometimes we need to add extra
JavaScript files for IE. But now we can able to create rounded corners just using a single property that is available in CSS3.
The
border-radius property allows you to add rounded corners to elements.
<!DOCTYPE html>
<html>
<head>
<style>
#rnd-cornners1 {
border-radius: 25px;
background: #EB65A0;
padding: 20px;
width: 200px;
height: 150px;
}
#rnd-cornners2 {
border-radius: 25px;
border: 2px solid #73C5E1;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rnd-cornners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rnd-cornners2">Rounded corners!</p>
</body>
</html>
