<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
border: 1px solid black;
width: 280px;
height: 280px;
line-height: 280px;
text-align:center;
}
#point{
border-radius: 50px;
}
#point1{
border-radius: 50%;
}
#point2{
border-radius: 50px 10px;
}
#point3{
border-radius: 100px 50px 10px;
}
#point4{
border-radius: 150px 100px 50px 10px;
}
</style>
</head>
<body>
<h1>CSS border-radius Property</h1>
<h2>border-radius: 50px;</h2>
<div id="point">
border-radius: 50px;
</div>
<h2>border-radius: 50%;</h2>
<div id="point1">
border-radius: 50%;
</div>
<h2>border-radius: 50px 10px;</h2>
<div id="point2">
border-radius: 50px 10px;
</div>
<h2>border-radius: 100px 50px 10px;</h2>
<div id="point3">
border-radius: 100px 50px 10px;
</div>
<h2>border-radius: 150px 100px 50px 10px;</h2>
<div id="point4">
border-radius: 150px 100px 50px 10px;
</div>
</body>
</html>