Border Radiusジェネレーター
角丸や有機的なシェイプを自在に作成
Border Radiusジェネレーターの使い方
要素の角を丸めるCSSプロパティ border-radius の値を、プレビューを見ながら組み立てるツールです。4隅をそれぞれ px で指定する「シンプル」モードと、水平・垂直の半径を % で別々に指定するスラッシュ記法（8値）で有機的な形を作る「ファンシー」モードの2種類があります。生成されたコードはそのままスタイルシートに貼り付けられ、処理はすべてブラウザ内で完結します。
モード選択
通常の角丸なら「シンプル (Basic)」、楕円の角で歪んだ形（Blob）を作るなら「ファンシー (Blob)」を選びます。モードを切り替えると生成コードの単位と書式も切り替わります。
各コーナーの調整
シンプルモードでは左上・右上・右下・左下の4つをスライダー（0〜200px）または数値欄で個別に設定します。ファンシーモードでは4隅の水平半径と垂直半径を 0〜100% で調整するか、「ランダム生成」で形を試せます。
コードのコピー
プレビューの形が決まったら「コピー」ボタンで border-radius の宣言をクリップボードにコピーし、自分のCSSに貼り付けます。プレビューは正方形なので、横長の要素では見え方が変わる点に注意してください。
border-radius の省略記法（1〜4値）とスラッシュ記法の読み方
border-radius は margin や padding と同じく、値の個数によって各角への割り当てが変わる一括指定プロパティです。手書きのCSSを読むときや、生成コードを短く整理したいときのために対応関係をまとめました。
| 書き方 | 左上 | 右上 | 右下 | 左下 |
|---|---|---|---|---|
| border-radius: 20px; | 20px | 20px | 20px | 20px |
| border-radius: 20px 0px; | 20px | 0px | 20px | 0px |
| border-radius: 20px 10px 0px; | 20px | 10px | 0px | 10px |
| border-radius: 20px 10px 5px 0px; | 20px | 10px | 5px | 0px |
2値なら「左上・右下」と「右上・左下」の対角ペア、3値なら「左上」「右上・左下」「右下」の順に割り当てられます。 このツールのシンプルモードは、4隅が一致するときだけ1値に短縮し、それ以外は4値で出力します。2値・3値への短縮は行わないため、必要なら上の表を参考に手で整理してください。
/* スラッシュの前 = 水平半径（左上 右上 右下 左下）、後 = 垂直半径（同じ順） */
スラッシュ記法では、各角の水平方向の半径と垂直方向の半径を別々に指定でき、両者が異なる角は楕円の4分の1の弧になります。 ファンシーモードはこの記法を8値すべて明示した形で出力します。スラッシュの前後それぞれにも上の1〜4値の省略規則が適用されるため、 「border-radius: 50% / 10%;」のような短い書き方も有効です。 個別プロパティ（border-top-left-radius など）では「border-top-left-radius: 30% 30%;」のようにスペース区切りで水平・垂直を指定します。 正式な定義は MDN の border-radius および W3C の CSS Backgrounds and Borders Module Level 3 を参照してください。
50% と 9999px の違い、および角丸が効かない代表的なケース
「とにかく丸くしたい」ときに使われる 50% と大きな px 値は、正方形では同じ見た目でも、横長・縦長の要素では結果が変わります。また、角丸を指定したのに反映されない場面には決まったパターンがあります。
| 要素の形 | border-radius: 50% | border-radius: 9999px |
|---|---|---|
| 正方形（100×100） | 真円（半径 50px × 50px） | 真円（半径が 50px に縮小される） |
| 横長（200×50） | 楕円（半径 100px × 25px） | カプセル形（両端が半径 25px の半円） |
| サイズが可変 | 常に幅・高さの半分を半径にする | 短い辺の半分に自動で収まる |
% の半径は水平方向が要素の幅、垂直方向が要素の高さに対する割合で解釈されるため、横長の要素に 50% を指定すると楕円になります。 一方、隣り合う2つの半径の合計がその辺の長さを超える場合、CSS の仕様ではすべての半径を同じ比率で縮小して収めると定められています。 9999px のような大きな値がカプセル形になるのはこの規則によるもので、要素のサイズが変わっても両端が半円のまま保たれます。 このツールのシンプルモードで大きな値を入れたときにある値以上で見た目が変わらなくなるのも同じ理由です。
角丸が効かない・崩れる代表例
| 症状 | 原因 | 対処 |
|---|---|---|
| 子要素の背景や画像が角からはみ出す | border-radius は子要素の描画を切り取らない | 親に overflow: hidden を指定するか、子要素にも同じ角丸を付ける |
| table の角が丸くならない | border-collapse: collapse と border-radius は併用できない | border-collapse: separate にし、必要なら各セルに角丸を指定する |
| 枠線（border）の内側だけ角張って見える | 内側の曲線半径は「指定値 − 枠線の太さ」になる仕様 | 枠線の太さ以上の半径を指定する |
| outline が角丸に沿わない | 古いブラウザでは outline が角丸を無視して矩形で描かれる | box-shadow の spread を枠線代わりに使う方法がある |
実際の使用例
4隅すべて同じ角丸（省略形で出力）
シンプルモードで4つの値を揃えた例です。値が一致すると1値の省略形になります。
INPUT
モード: シンプル 左上: 20 / 右上: 20 右下: 20 / 左下: 20
OUTPUT
border-radius: 20px;
上側だけ丸めたタブ型
右下と左下を 0 にすると4値がそのまま出力されます。並び順は左上・右上・右下・左下です。
INPUT
モード: シンプル 左上: 16 / 右上: 16 右下: 0 / 左下: 0
OUTPUT
border-radius: 16px 16px 0px 0px;
有機的な形（ファンシーモードの初期値）
水平半径と垂直半径を別々に指定するスラッシュ記法です。左上が小さく右下が大きい、雫のような形になります。
INPUT
モード: ファンシー 水平: 30 / 70 / 70 / 30 (%) 垂直: 30 / 30 / 70 / 70 (%)
OUTPUT
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
よくある質問
「/」で区切られた値は何ですか？
border-radius のスラッシュ記法です。スラッシュの前に4隅の水平方向の半径、後ろに垂直方向の半径を並べると、各角が真円の弧ではなく楕円の弧になります。ファンシーモードはこの記法で「border-radius: X1% X2% X3% X4% / Y1% Y2% Y3% Y4%;」を出力しており、値の並び順はどちらも左上・右上・右下・左下です。
4隅を同じ値にしたい場合はどうすればいいですか？
シンプルモードで4つのスライダー（または数値欄）を同じ値にしてください。4隅が一致すると、このツールは「border-radius: 20px;」のように1値の省略形で出力します。1つでも異なる値があれば「border-radius: 20px 20px 0px 0px;」のように4値をすべて書き出します。2値・3値の省略形（例: 20px 0px）への自動短縮は行いません。
シンプルモードで % 指定はできますか？
シンプルモードの出力は px 固定です。% で指定したい場合はファンシーモードを使い、水平・垂直の値を同じにしてください。たとえば8つの値をすべて 50 にすると「border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;」が生成され、これは「border-radius: 50%;」と同じ意味になります。
50% と 9999px はどちらも「丸くする」指定ですが何が違いますか？
50% は要素の幅と高さそれぞれの半分を半径にするため、正方形なら真円、横長なら楕円になります。一方 9999px のような大きな px 値を指定すると、CSS の仕様により半径は隣接する辺に収まるよう縮小されるため、横長の要素でも両端が半円の「カプセル形」になります。ボタンやタグをピル形にしたいなら大きな px 値、要素全体を楕円にしたいなら 50% を使い分けます。
border-radius を付けたのに角が丸くならないのはなぜですか？
代表的な原因は、角丸を付けた要素の中に背景色や画像を持つ子要素があり、その子要素が角からはみ出して描画されているケースです。border-radius は要素自身の背景と枠線を丸めますが、子要素の内容を自動では切り取りません。親要素に overflow: hidden を追加すると、子要素も角丸に沿って切り取られます。また、table 要素では border-collapse: collapse が指定されていると border-radius が効きません。
数値欄にスライダー上限（200）より大きな値を入れても大丈夫ですか？
数値欄はスライダーの上限に縛られないため、201 以上の値も入力でき、その値がそのままコードに反映されます。ただし、プレビューの箱より大きな半径を指定しても、実際の描画では隣接する辺の長さに合わせて縮小されるため、見た目はある値以上で変わらなくなります。数値欄を空にすると値が数値として解釈できなくなりコードが崩れるため、0 以上の整数を入力してください。
生成した値をアニメーションさせることはできますか？
border-radius はアニメーション可能なプロパティなので、transition や @keyframes で値を変化させられます。ファンシーモードで作った複数の形を @keyframes の各ステップに割り当てると、輪郭がゆっくり変形する表現が作れます。ただし、途中の形を滑らかに補間させるには、各キーフレームで値の数（8値なら8値）を揃えておく必要があります。
役立つTips
アバター画像の装飾
ファンシーモードで作った有機的な形（Blob Shape）を img 要素や背景付きの div に適用すると、プロフィール画像の枠として柔らかい印象を出せます。画像は object-fit: cover と組み合わせると歪みません。
アニメーションとの組み合わせ
ファンシーモードの「ランダム生成」で複数の形を作って @keyframes に並べ、animation で切り替えると、ゆっくり形を変える背景装飾が作れます。ステップごとに値の個数を揃えるのがポイントです。
プレビューは正方形、実際の要素は違うかもしれない
% 指定の半径は要素の幅・高さそれぞれに対する割合です。横長のカードに適用すると、プレビューの正方形とは異なる楕円弧になるため、貼り付け先の縦横比で再確認してください。
上だけ・下だけ丸めるにはシンプルモードで0を組み合わせる
タブの上側やモーダル下部のように片側だけ丸めたい場合は、丸めない角を 0 にします。左上・右上を 16、右下・左下を 0 にすると「border-radius: 16px 16px 0px 0px;」が生成されます。