<p>▼border-radius:50%(四隅を同じ値で設定)</p>
<div id="d1">
</div>

<p>▼border-radius:10% 30%;(左上と右下、右上と左下を設定)</p>
<div id="d2">
</div>

<p>▼border-radius:0% 50% 30%;(左上、右上と左下、右下を設定)</p>
<div id="d3">
</div>

<p>▼border-radius:50% 20% 50% 20%;(左上、右上、右下、左下の順に設定)</p>
<div id="d4">
</div>

<p>▼bborder-top-left-radius:50px 10px;(左上角-上辺、左上角-左辺を設定)</p>
<p> border-top-right-radius:10px 50px;(右上角-上辺、右上角-右辺を設定)</p>
<p> border-bottom-right-radius:50px 10px;(右下角-下辺、右下角-右辺を設定)</p>
<p> border-bottom-left-radius:10px 50px;(左下角-下辺、左下角-左辺を設定)</p>
<div id="d5">
</div>
#d1{
  width:100px;
  height:100px;
  background-color:red;
  border:solid 1px;
  margin-bottom:5px;
  
  border-radius:50%;
}
#d2{
  width:100px;
  height:100px;
  background-color:yellow;
  border:solid 1px;
  margin-bottom:5px;
  
  border-radius:50% 20%;
}
#d3{
  width:100px;
  height:100px;
  background-color:aqua;
  border:solid 1px;
  margin-bottom:5px;
  
  border-radius:0% 50% 30%;
}
#d4{
  width:100px;
  height:100px;
  background-color:lime;
  border:solid 1px;
  margin-bottom:5px;
  
  border-radius:0% 10% 30% 50%;
}
#d5{
  width:100px;
  height:100px;
  background-color:maroon;
  border:solid 1px;
  margin-bottom:5px;
  
  border-top-left-radius:50px 10px;
  border-top-right-radius:10px 50px;
  border-bottom-right-radius:50px 10px;
  border-bottom-left-radius:10px 50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.