4隅の角丸を個別に調整して、border-radiusのCSSを生成します。楕円形の角丸（スラッシュ記法）にも対応しています。
指定のしかた
border-radius: 8px; /* 4隅すべて */ border-radius: 8px 16px; /* 左上・右下 / 右上・左下 */ border-radius: 8px 16px 24px 4px; /* 左上→右上→右下→左下（時計回り） */ border-radius: 50% / 30%; /* 横 / 縦 を別々に（楕円） */
使い分けの目安
外側の枠と内側の要素を入れ子にする場合、内側の角丸は「外側の角丸 − 間隔」にすると、線が平行になり整って見えます。
| 値 | 印象・用途 |
|---|---|
| 0 | かっちりした印象。表やデータ表示向き |
| 4〜8px | 一般的なボタン・入力欄 |
| 12〜24px | カード。やわらかい印象 |
| 9999px | 完全な角丸（ピル型ボタン、タグ） |
| 50% | 正方形の要素なら円になる |
スラッシュ記法
「50% / 30%」のように書くと、横方向と縦方向で異なる半径を指定でき、楕円形の角丸になります。ふきだしや有機的な形を作るときに使えます。
サイト全体で値をそろえる
ボタン・カード・入力欄で角丸の値がばらばらだと、まとまりのない印象になります。4px・8px・16px のように段階を決めておき、その中から選ぶようにすると統一できます。
CSS変数（--radius-sm など）で定義しておけば、あとから一括で調整できます。
よくある質問
Q 円形にするには？
正方形の要素に border-radius: 50% を指定します。長方形では楕円になります。
Q ピル型（完全な角丸）はどう作りますか？
border-radius: 9999px のように十分大きな値を指定すると、高さに応じた完全な角丸になります。
Q 値の順番は？
左上 → 右上 → 右下 → 左下 の時計回りです。
Q 枠線と角丸を併用すると？
border は角丸に沿って描画されます。内側の要素にも同様の角丸を設定すると、はみ出しを防げます。