<!DOCTYPE html>  
<html>  
<head>  
<style>  
div{  
padding: 50px;  
border: 6px ridge red;  
width: 300px;  
margin: 20px;  
font-weight: bold;  
height: 175px;  
float: left;  
font-size: 25px;  
}  
#satu {  
border-radius: 10% / 50%;  
background: lightgreen;  
}  
#dua {  
border-radius: 120px / 100px 10px;  
background: lightblue;  
}  
#tiga {  
border-radius: 50% 10em / 10% 20em;  
background: lightpink;  
}  
#empat {  
border-radius: 100px 10em 120px / 30%;  
background: cyan;  
}  
</style>  
</head>  
  
<body>  
    <center>  
    <div id = "satu">  
    <h2>Selamat datang ke Mbah WP</h2>  
    <p>border-radius: 10% / 50%; </p>  
    </div>  
    <div id = "dua">  
    <h2>Selamat datang ke Mbah WP</h2>  
    <p>border-radius: 120px / 100px 10px; </p>  
    </div>  
    <div id = "tiga">  
    <h2> Selamat datang ke Mbah WP </h2>  
    <p>border-radius: 50% 10em / 10% 20em; </p>  
    </div>  
    <div id = "empat">  
    <h2> Selamat datang ke Mbah WP </h2>  
    <p>border-radius: 100px 10em 120px / 30%; </p>  
    </div>  
    </center>  
</body>  
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.