<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.