Run Example

Edit This Code:
<!DOCTYPE html>
<html>
<head>
<style> 
#round_corner1 {
background-color: lightgreen;
border-radius: 10px 20px 50px 5px;
width: 100px;
height: 50px;
padding: 20px;
}
#round_corner2 {
background-color: lightblue;
border: 3px solid;
border-radius: 10px 20px 50px;
width: 100px;
height: 50px;
padding: 20px;
}
#round_corner3 {
background-color: lightblue;
border: 3px solid;
border-radius: 20px 50px;
width: 100px;
height: 50px;
padding: 20px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p id="round_corner1">Rounded corners!</p>
<p id="round_corner2">Rounded corners!</p>
<p id="round_corner3">Rounded corners!</p>

</body>
</html>
Result: