CSSで枠線の角を丸くする方法

ここでは、CSSで枠線の角を丸くする方法について説明していきます。

「border-radius」プロパティ

枠線を丸くするには「border-radius」プロパティを用います。

構文

border-radius: ４角の値
border-radius: 左上と右下の値 右上と左下の値
border-radius: 左上の値 右上と左下の値 右下の値
border-radius: 左上の値 右上の値 右下の値 左下の値

使用例

HTML

<div class="btns">
  <div class="btns__item btn btn-1">
    <a href="#">border-radius: 25px;</a>
  </div>
  <div class="btns__item btn btn-2">
    <a href="#">border-radius: 30px 10px;</a>
  </div>
  <div class="btns__item btn btn-3">
    <a href="#">border-radius: 25px 10px 50px;</a>
  </div>
  <div class="btns__item btn btn-4">
    <a href="#">border-radius: 35px 15px 50px 5px;</a>
  </div>
</div>

CSS

.btns {
  display: flex;
  gap: 15px;
}
.btn a {
  display: inline-block;
  border: #111 solid 1px;
  padding: 50px;
}
.btn-1 a {
  border-radius: 25px;
}
.btn-2 a {
  border-radius: 30px 10px;
}
.btn-3 a {
  border-radius: 25px 10px 50px;
}
.btn-4 a {
  border-radius: 35px 15px 50px 5px;
}

出力結果

まとめ

このように、「border-radius」プロパティに値を指定することで、枠線の角を丸くすることができます。