Try it Editor: CSS3 border-radius - Specify Each Corner 2

Edit This Code :


<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>
</head>
<body>

<p>Elliptical border - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p>Elliptical border - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners9"></p>

</body>
</html>

Result :