CSS Border Radiusジェネレーター
丸い角を視覚的に作成して、CSSをコピーします。
プリセット
使い方
- スライダーをドラッグして、各角の半径を調整します。
- 「すべての角をリンク」を有効にして、すべてを一度に変更します。
- 単位(px、%、rem、em)を選択します。
- 「CSSをコピー」をクリックして、プロパティをクリップボードに入れます。
よくある質問
円を作るには?
すべての角を50%に設定します(「円/ピル」プリセットを使用します)。完全な円のためには、正方形の要素に適用します。
最大の半径は?
スライダーは100まで。pxでは100 pxです。%では、100%はその角で完全に丸くなることを意味します。デザインに応じて単位を変更できます。
border-radiusショートハンドを理解する
CSS border-radiusプロパティはW3C CSS Backgrounds and Borders Module Level 3で定義されている。そのショートハンドは円形コーナーに最大4つの値、楕円コーナーには（スラッシュで区切られた）最大8つの値を受け付ける。コーナーの順序は固定だ：左上、右上、右下、左下、左上から時計回り、時計盤を読むのとまったく同じ方法だ。仕様は明確だ：「左下が省略された場合は右上と同じ。右下が省略された場合は左上と同じ。右上が省略された場合は左上と同じ。」
| 値 | 意味 | 例 |
|---|---|---|
| 1つの値 | 4つのコーナーすべて | border-radius: 12px |
| 2つの値 | TL+BRが1番目、TR+BLが2番目 | border-radius: 12px 4px |
| 3つの値 | TL=1番目、TR+BL=2番目、BR=3番目 | border-radius: 12px 8px 4px |
| 4つの値 | TL TR BR BL 時計回り | border-radius: 12px 8px 4px 0 |
| 8つの値（/あり） | 水平半径 / 垂直半径（楕円コーナー） | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% |
4つのコーナーごとのロングハンドで他のコーナーを書かずに1つのコーナーだけをターゲットにできる：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。それぞれ1つの値（円形コーナー）または2つの値（楕円のx y）を受け付ける。
ピクセル、パーセンテージ、50%トリック
W3C仕様ではパーセンテージの解決方法を定義している：「水平半径のパーセンテージはボーダーボックスの幅を、垂直半径のパーセンテージはボーダーボックスの高さを参照する。」これは重要な結果をもたらす：border-radius: 50%は要素が正方形の場合にのみ完全な円を作る。200×100の長方形では、すべてのコーナーの50%は楕円を作る：水平半径100px（幅の半分）、垂直半径50px（高さの半分）だ。
どのユニットをいつ使うか：
- ピクセル（
px）：要素に合わせてスケールしない正確で固定のコーナー。ボタン、カード、一貫したUIコンポーネントに最適。 - パーセンテージ（
%）：要素に合わせてスケールする。形状変化するコンポーネントの円や楕円に50%を使う。 em/rem：フォントサイズに合わせてスケールする。内部のテキストと一緒にコーナー半径を大きくすべきボタンに便利。calc()：単位を混ぜる。例えばcalc(8px + 0.5em)はテキストサイズとともにわずかにスケールするベースになる。
ピルトリック
要素の最短辺の半分より大きいborder-radiusを設定すると、各コーナーが真の半円にクランプされ、幅に関わらずピル形状が生まれる。慣習はborder-radius: 9999pxだ。どんな現実的な要素も超えないほど大きい数であれば何でもよい。これがBootstrapの.rounded-pillが50rem（〜800px）を使い、Tailwind v4のrounded-fullがcalc(infinity * 1px)に解決される理由だ：どちらも同じアイデアをエンコードしている。ボックスより大きい数字はどんな要素でもピルを保証する。
楕円コーナーとオーガニックなブロブ形状
8値（スラッシュ）形式は、ヒーローイラストや装飾的な背景に人気の出てきたオーガニックで非対称な「ブロブ」形状を作るためにデザイナーが使うものだ。各コーナーはスラッシュ前に異なる水平半径、スラッシュ後に異なる垂直半径を取り、円弧に制約されない曲線を生み出す。
/* Asymmetric blob */
.blob {
width: 280px;
height: 280px;
background: linear-gradient(135deg, #6366f1, #ec4899);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}RTLレイアウト向けの論理プロパティバリアント
CSS Logical Properties Module Level 1は書字方向に適応する4つの論理ロングハンドを導入している：
border-start-start-radius：LTRの英語では左上、RTLのアラビア語/ヘブライ語では右上。border-start-end-radius：LTRでは右上、RTLでは左上。border-end-start-radius：LTRでは左下、RTLでは右下。border-end-end-radius：LTRでは右下、RTLでは左下。
同じコンポーネントが両方の書字方向で対称に見える必要があるときに便利だ：チャットバブルの「口元」コーナーは常に発言者の側にあるべきで、常に左側にあるべきではない。論理プロパティのショートハンドはまだないため、RTL対応のコーナーに切り替えるには4つのロングハンドをすべて個別に書く必要がある。
ボーダーが太い場合の外側エッジと内側エッジ
半径はボーダーの外側エッジに適用される。ブラウザはコーナーでボーダーが不連続に見えないよう、内側エッジの小さな同心半径を自動的に計算する。実用的な結果：2pxボーダーの16px外側半径は内側半径が約14pxになり、ボーダーがすべての方向で一定の厚さのフレームのように見える。背景色がボーダーの下に滲まずに内側エッジで止まるようにするにはbackground-clip: padding-boxを設定する。
実用的なサイズ規則
| UIエレメント | 典型的な半径 | メモ |
|---|---|---|
| カード | 8-12 px | Material 3ミディアム = 12px；多くのデザインシステムは8〜16の間。 |
| ボタン（コーポレート） | 4-8 px | わずかに角丸で遊び心なくプロフェッショナルに見える。 |
| ボタン（コンシューマー/ピル） | 9999px | フレンドリーに見える；ピルトリックで固定する。 |
| 入力 / フォームフィールド | 4-8 px | ビジュアルの一貫性のためボタン半径に合わせる。 |
| モーダル / ダイアログ | 12-16 px | 大きいサーフェスは幼稚に見えずに大きい半径を許容する。 |
| タグ / バッジ | 4px またはピル | 明確なスタイルの選択：シャープまたは完全丸角、中間はほぼない。 |
| アバター | 50% | 正方形の要素に適用して完全な円を作る。 |
| モバイルのボトムシート | 16〜24px（上のコーナーのみ） | 下のコーナーが画面の端にフラッシュしたままになるよう個別のロングハンドを使う。 |
| ヒーローのブロブ背景 | 8値形式 | 例：30% 70% 70% 30% / 30% 30% 70% 70%。 |
よくある間違い
- 正方形でない要素に50%を使って円を期待する。長方形の50%は楕円になる。要素を正方形に保つか、真のピルには
border-radius: 9999pxを使う。 - コーナーの順序を忘れる。ショートハンドは左上から時計回りだ（TL TR BR BL）。2値形式は対角線上の反対のペアを設定するため、覚え間違いしやすい。
- 負の値。仕様では無効と定義されており、ブラウザは暗黙的にゼロにクランプする。コーナーが期待通りに角丸にならない場合、誤って引き算していないか確認する。
- 角丸の親要素から子要素がはみ出る。
border-radiusを持つ要素はデフォルトではその子孫をクリップしない。子要素を角丸のエッジで止めたい場合は親要素にoverflow: hiddenを追加する。 - ショートハンドの前にコーナーごとのプロパティ。CSSのカスケードは順序に敏感なため、
border-top-left-radiusの後にborder-radiusを書くとコーナーごとの値が上書きされる。ショートハンドを先に書き、その後にコーナーごとのオーバーライドを書く。 %とpxの不適切な混在。あるコーナーに50%の半径、別のコーナーに12pxを設定してもデザイナーが期待するものにはほとんどならない。1つの要素では1つの単位で統一する。- テーブルと
border-collapse: collapse。MDNのリファレンスは明確だ：ボーダーが折りたたまれている場合、border-radiusはテーブルまたはインラインテーブル要素には適用されない。border-collapse: separateに切り替えるか、ラッピング要素に半径を適用する。
よくある質問
画像の角が丸くならないのはなぜか？
画像がborder-radius付きのコンテナの中にあるのにコーナーが四角く見える場合、親がクリップしていない。親にoverflow: hiddenを追加する。代わりに、border-radiusを直接<img>要素に適用する方法もある。画像はこのプロパティにネイティブに対応している。
border-radiusはパフォーマンスに影響するか？
ほとんど影響しない。最新ブラウザはGPUで角丸コーナーをレンダリングし、コストは正方形のエッジとほぼ同じだ。例外は大きな要素のborder-radiusをフレームごとにアニメーションする場合（レイヤーの再コンポジットを引き起こすことがある）だが、静的な角丸コーナーは事実上無料だ。
古いブラウザでも動作するか？
はい。IE9以降のすべてのブラウザはプレフィックスなしでborder-radiusをサポートしている。論理プロパティバリアント（border-start-start-radiusなど）は新しい：Chrome 89+、Firefox 66+、Safari 15+。論理プロパティの動作が必要な古いブラウザには、フォールバックとして小さな@supportsブロックを書く。
チャットバブルはどう作るか？
4つのコーナーごとのロングハンドで3つのコーナーを角丸にして4つ目を小さくまたはシャープにする。発言者を指す「口元」だ。例えば、送信メッセージのバブル：border-radius: 16px 16px 4px 16px;。RTL対応のバブルには、書字方向に合わせて口元が反転するよう論理ロングハンドに切り替える。
ピルボタンが異なる要素幅で不均一に見えるのはなぜか？
ピルは各コーナーを最短辺の半分にクランプする。典型的なボタンでは高さになる。そのため低いボタンは小さい半径に、高いボタンは大きい半径になる。これは意図した動作だ。サイズに関わらずすべてのボタンで一定の半径を望む場合は、ピルトリックの代わりに固定のピクセル値（例：border-radius: 24px）を使う。
生成されたCSSをTailwind / Bootstrapプロジェクトにそのまま貼り付けられるか？
はい。生成されたCSSはプリプロセッサやフレームワーク依存のないプレーンな標準構文だ。Tailwind v4では、ユーティリティクラス形式を保ちたい場合、任意の値をユーティリティとして書くこともできる（rounded-[12px]やrounded-[30%/70%]）。