border-radiusジェネレーター
border-radiusを4隅・縦横別にプレビューしながら作り、最短のCSSで出力します。入れ子の角丸（内側の半径）も計算できます。
よく使う形
プレビュー
スライダーか数値を動かすと、その場でCSSを作ります。
CSS
- ショートハンド —
入れ子の角丸（ネストした border-radius）
角丸の箱の中に、余白を空けて角丸の箱を入れるときは、内側の半径を「外側 − 余白」にすると角の弧が平行にそろいます。
求める値
px
px
px（無ければ 0）
プレビュー
半径と余白を入れると計算します。
- 内側の半径 —
補足
-
ショートハンドは CSS の省略規則どおりに畳みます。左下が右上と同じなら 4 つ目を、右下が左上と同じなら 3 つ目を、
右上が左上と同じなら 2 つ目を省きます。縦横が同じなら
/以降も書きません。 -
%は要素の幅（横）と高さ（縦）に対する割合です。隣り合う角の合計が 100% を超えると、ブラウザが全体を縮めて描きます。 - 入れ子の計算は px で行います。余白が外側の半径より大きいと内側は 0（直角）になります。負の半径は CSS に書けないためです。
- 入力した値は、この端末の外へ出ません。
よくある質問
4つの角をそれぞれ違う丸さにできますか？
できます。左上・右上・右下・左下を個別に調整でき、「縦横を別々に指定」をオンにすると、角ごとに横と縦の半径を変えた楕円の角も作れます。出力は同じ値を省いた最短のショートハンドにまとめます。
px・%・rem のどれで出力できますか？
3つとも選べます。%は要素の幅（横）と高さ（縦）に対する割合なので、正方形でない要素に50%を指定すると楕円になります。単位を切り替えても数値は換算せず、そのまま単位だけを付け替えます。
入れ子にした角丸の内側の半径はどう決めればよいですか？
内側の半径 = 外側の半径 − 余白（padding）にすると、内側と外側の角の弧が平行にそろいます。外側に枠線がある場合は枠線の太さも引きます。余白の方が大きいと計算上は負になりますが、負の半径は書けないため 0（直角）として出します。内側から外側を求める逆算もできます。
入れ子の計算は rem や % でもできますか？
できません。入れ子の計算は px 固定です。%は要素の大きさによって実際の長さが変わるため、余白との引き算では正しい半径になりません。