<!DOCTYPE html>  
<html>  
  
<head>  
<title> CSS border-radius </title>  
<style>  
div {  
padding: 50px;  
margin: 20px;  
border: 6px ridge red;  
width: 300px;  
float: left;  
height: 150px;  
}  
p{  
font-size: 25px;  
}  
#satu {  
border-radius: 90px;  
background: lightgreen;  
}  
#dua {  
border-radius: 25% 10%;  
background: orange;  
}  
#tiga {  
border-radius: 35px 10em 10%;  
background: cyan;  
}  
#empat {  
border-radius: 50px 50% 50cm 50em;  
background: lightblue;  
}  
  
</style>  
</head>  
  
<body>  
  <div id = "satu">  
  <h2> Selamat datang ke Mbah WP </h2>  
  <p> border-radius: 90px; </p>  
  </div>  
  <div id = "dua">  
  <h2> Selamat datang ke Mbah WP </h2>  
  <p> border-radius: 25% 10%; </p>  
  </div>  
  <div id = "tiga">  
  <h2> Selamat datang ke Mbah WP </h2>  
  <p> border-radius: 35px 10em 10%; </p>  
  </div>
  <div id = "empat">  
  <h2> Selamat datang ke Mbah WP </h2>  
  <p>border-radius: 50px 50% 50cm 50em;</p> 
  </div>  
</body>  
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.