角丸とは

border-radius で要素の角を丸くする CSS の技法。丸め方の強さでカードからピル型・円まで作れる。

概要

border-radius を指定すると、四角い要素の角を丸くできます。数値を小さくすると控えめな丸み、大きくすると丸みの強いカードになり、縦横のどちらか一方を要素の高さの半分にすると両端が完全に丸いピル型のボタン、正方形の要素に指定すると円形にもなります。ボタン・カード・アバター画像など、幅広い部品の印象を柔らかくするために使われます。

別名

表記ゆれ：角丸、border-radius、丸角、ピル型

「角を丸くして」という言い方でも十分通じます。ピル型は特に「丸ボタンにして」「カプセル型にして」と言われることもあります。

AI への伝え方

「角丸にして」で伝わりますが、丸みの強さ（少し丸い・かなり丸い・完全な円やピル型）を伝えると仕様がぶれません。他の部品と丸みをそろえたい場合は「他のボタンと同じ角丸にして」のように基準を伝えると統一感が出ます。

デモ

4px

12px

24px

ピル型

円

コード

HTML

<div class="rounded-corners-demo">
  <div class="rounded-corners-demo__box rounded-corners-demo__box--sm">4px</div>
  <div class="rounded-corners-demo__box rounded-corners-demo__box--md">12px</div>
  <div class="rounded-corners-demo__box rounded-corners-demo__box--lg">24px</div>
  <div class="rounded-corners-demo__box rounded-corners-demo__box--pill">ピル型</div>
  <div class="rounded-corners-demo__box rounded-corners-demo__box--circle">円</div>
</div>

CSS

.rounded-corners-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-family: sans-serif;
}

.rounded-corners-demo__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 60px;
  background: #0017c1;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
}

.rounded-corners-demo__box--sm {
  border-radius: 4px;
}

.rounded-corners-demo__box--md {
  border-radius: 12px;
}

.rounded-corners-demo__box--lg {
  border-radius: 24px;
}

.rounded-corners-demo__box--pill {
  width: 110px;
  height: 44px;
  border-radius: 999px;
}

.rounded-corners-demo__box--circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}