ボタンやカードの角を丸くしたり、アイコン画像を円形に切り抜いたり——こうした「角丸」を作るのが CSS の border-radius プロパティです。値の指定の仕方ひとつで、軽く丸めた四角形から、左右が半円のピル形、完全な円や楕円まで作れます。この記事では、基本の指定方法、4つの角を個別に丸める書き方、% と px の違い、真円・ピル形の作り方、そして角丸が効かないときの原因まで、実際の表示を見比べながら初心者の方にも分かるように解説します。
目次
border-radius の基本
border-radius は、要素の角を丸める半径（カーブの大きさ）を指定するプロパティです。値を1つだけ書くと、4つの角すべてが同じ半径で丸くなります。値が大きいほど、丸みも大きくなります。
.card {
/* 4つの角をすべて半径8pxで丸める */
border-radius: 8px;
}下のプレビューで、丸め方の違う4種類を並べました。値や角の指定を書き換えると、すぐ右に反映されます。それぞれがどんな指定で作られているか、CSS のコメントを見ながら確かめてみてください。
<div class="grid">
<div class="box r1">角丸</div>
<div class="box r2">ピル</div>
<div class="box r3">円</div>
<div class="box r4">一部</div>
</div>
.grid {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.box {
width: 120px;
height: 120px;
background: #4a3aff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-size: 14px;
}
/* 4隅をまとめて角丸に */
.r1 { border-radius: 16px; }
/* 高さの半分以上で左右が半円のピル形 */
.r2 { border-radius: 9999px; }
/* 正方形に 50% で真円 */
.r3 { border-radius: 50%; }
/* 左上と右下だけ角丸 */
.r4 { border-radius: 32px 0 32px 0; }
4つの角を個別に丸める
値を複数並べると、角ごとに違う半径を指定できます。値の数によって対応する角が変わり、左上から時計回りで適用されます。
| 値の数 | 対応する角 |
|---|---|
| 1個 | 4つの角すべて同じ |
| 2個 | 「左上・右下」と「右上・左下」 |
| 4個 | 左上 → 右上 → 右下 → 左下（時計回り） |
.box {
/* 左上16px 右上0 右下16px 左下0 */
border-radius: 16px 0 16px 0;
}
/* 特定の角だけを個別プロパティで指定することもできる */
.tab {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}タブやふきだしのように「上だけ丸める」「片側だけ丸める」といったデザインは、この個別指定で作れます。1つの角だけ変えたいときは、border-top-left-radius のような角ごとのプロパティを使うと分かりやすくなります。
% と px の違い
半径の単位には px のほか % も使えます。px は要素の大きさに関わらず一定の丸みになりますが、% は要素の幅・高さに対する割合で計算されます。そのため、要素の大きさが変わると % の丸みも一緒に変化します。
この性質を使うと、正方形の要素に border-radius: 50% を指定するだけで真円が作れます。アイコンやアバター画像を丸く表示したいときの定番です。
.avatar {
width: 64px;
height: 64px; /* 幅と高さを同じにする */
border-radius: 50%; /* 正方形 + 50% で真円になる */
}幅と高さが違う長方形に 50% を指定すると、円ではなく楕円になります。きれいな真円にしたいときは、幅と高さを必ずそろえてください。
ピル形（左右が半円のボタン）を作る
タグやボタンでよく見る、左右の端が半円になった「ピル形」は、高さの半分以上に十分大きい半径を指定すると作れます。要素の高さがいくつでも対応できるよう、9999px のような大きな値を入れておくのが手軽な方法です。
.pill {
padding: 8px 20px;
/* 高さの半分を超える大きな値で端が半円になる */
border-radius: 9999px;
}半径が要素の高さの半分を超えると、それ以上は丸まりません。そのため大きすぎる値を入れても角がいびつになることはなく、高さに応じて自動的にちょうど半円になります。
角丸が効かないとき
中の画像が角からはみ出すとき
角丸の要素の中に画像などを入れると、子要素が四角いまま角の外へはみ出して見えることがあります。これは border-radius が要素の枠を丸めても、中身まで自動で切り抜かないためです。はみ出しを丸く隠すには、親要素に overflow: hidden; を指定します。
.thumb {
border-radius: 12px;
overflow: hidden; /* はみ出した子要素を角丸で切り抜く */
}真円にならず楕円になるとき
50% を指定したのに楕円になる場合、要素の幅と高さが違っているのが原因です。width と height を同じ値にそろえれば真円になります。テキストの量で高さが変わる要素では、円が崩れやすいので注意してください。
そもそも丸くならないとき
角丸がまったく付かないときは、半径の値に単位を付け忘れていないか確認しましょう（0 以外は 16px のように単位が必要です）。また、後から書いた別の CSS で border-radius: 0 に上書きされていないか、開発者ツールで適用されているスタイルを確認すると原因が分かります。
まとめ
border-radius は、角丸から円・ピル形まで幅広いデザインを作れるプロパティです。要点を整理します。
- 値を1つで4隅、4つ書くと左上から時計回りに個別指定できる。
- 角ごとに
border-top-left-radiusなどの個別プロパティもある。 %は要素サイズに対する割合。正方形＋50%で真円、長方形だと楕円。- ピル形は
9999pxのような大きな値で端を半円にする。 - 中身のはみ出しを丸く隠すには親に
overflow: hidden;。
まずはボタンやカードに border-radius: 8px を付けるところから始め、50% での円、大きな値でのピル形へと試していくと、丸めの感覚がつかめます。