四隅を同じ値で角丸
.redius01 {
width: 200px;
height: 200px;
background-color: #73B8E2;
border-radius: 50px;
}
四隅をそれぞれ異なる値で角丸
.redius02 {
width: 250px;
height: 250px;
background-color: #87C2E6;
border-radius: 40px 50px 60px 70px;
}
正円
.circle01 {
width: 250px;
height: 250px;
background-color: #FFADD6;
border-radius: 50%;
}
/(スラッグ)で水平方向/垂直方向 分けて指定
.circle02 {
width: 250px;
height: 250px;
background-color: #FFADD6;
border-radius: 100px 0 0 0 / 80px 0 0 0;
}
歪んだ円
.circle03 {
width: 250px;
height: 250px;
background-color: #FFADD6;
border-radius: 55% 45% 55% 45% / 40% 55% 45% 60%;
}
歪んだ円で画像をトリミング
.circle04 img {
border-radius: 55% 45% 55% 45% / 40% 55% 45% 60%;
}