「CSS」border-radiusで四角の角を丸くするサンプル

2022年2月21日

1.円を作成する
書式
border-radius: 50%;
サンプルコード

<style>
  .cft {
    border-radius: 50%;
    background-color: skyblue;
    width: 40px;
    height: 40px;
  }
</style>
<div class="cft"></div>

2.角を楕円形にする(横30px、縦25px)
書式
border-radius: 横/縦;
サンプルコード

<style>
  .cft {
    border-radius: 30px/25px;
    border: 1px solid #000;
    background-color: skyblue;
    width: 120px;
    height: 60px;
  }
</style>
<div class="cft">楕円のサンプル</div>