ボーダーラディウスプロパティ

最終更新：2026-09-13

border-radius ボーダーラディウスプロパティ

border-radius は要素の鋭角な角を丸め、モダンな UI デザインで最もよく使われる装飾プロパティの一つです。長さまたはパーセントの値を受け付け、値が大きいほど丸みが強くなります。半径が辺の長さの半分以上になると、角は半円または完全な円になります。

カテゴリ
初期値	0
継承	いいえ
適用対象	all
アニメーションタイプ	length
CSS バージョン	CSS3
状態	標準

📝 構文

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ];

⚙️ 値

値	タイプ	説明
`<length>`	タイプ	固定の角の半径
`<percentage>`	タイプ	要素のサイズに対する相対的なパーセント

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
border-radius	✓ v4	✓ v12	✓ v1	✓ v3.1	✓ v10.5
すべての主要ブラウザーでサポート

ヒント： border-radius: 50% を等しい幅と高さと組み合わせると正円になり、アバターの切り抜きによく使われます。

ヒント： 1〜4 個の値を受け付け、スラッシュ記法で水平半径と垂直半径を別々に設定できます。例: border-radius: 20px / 10px で楕円形の角になります。

❓ よくある質問

Qborder-radius は img 要素に効きますか？

Aはい。border-radius は要素の border-box の端に適用され、<img> のような置換要素にも効きます。画像に border-radius: 50% を等しい幅と高さとともに指定すれば円形のアバターになります。画像の内容が丸い角からはみ出すことがあるため、コンテナに overflow: hidden を追加するのが一般的です。

Qborder-radius のパーセントは何に対する相対値ですか？

Aパーセントは要素自身の幅と高さに対して解決されます。水平半径は幅に対して、垂直半径は高さに対してです。そのため border-radius: 50% は正方形の要素では正円になりますが、長方形では楕円になります。これが円形アバターやカプセルボタンの仕組みです。

Q正円とカプセル形を描くにはどうすればよいですか？

A正円: 幅と高さを等しくし、border-radius: 50%。カプセル: border-radius: 999px — 値が高さの半分を超えると両端が自動的に完全な半円になります。長方形では 50% は楕円になるため、カプセルには代わりに 999px または十分大きな固定ピクセル値を使用してください。

Qスラッシュ記法 border-radius: 20px / 10px はどういう意味ですか？

Aスラッシュの左側が水平半径、右側が垂直半径で、楕円形の角になります。例えば border-radius: 50% / 25% とすると水平方向の弧が垂直方向より広くなります。スラッシュがない場合、2 つの半径は等しくなります。4 つの角をそれぞれ独立して形作るために、スラッシュで区切った 2 組の値を書くこともできます。