ネストBorder-Radius最適化
同心円に揃う内側の角丸を計算
設定
選んだ側の角丸が入力欄になり、反対側が計算されます
px
px
プレビュー
最適な内側の角丸12px= max(0, 28px − 16px)
余白が外側の角丸以上のため、内側は直角になります
CSS
.outer {
border-radius: 28px;
padding: 16px;
}
.inner {
border-radius: 12px;
}ネストBorder-Radius最適化ツールとは？
外側の角丸と余白に対し、同心円を保つ内側のborder-radiusを計算できるツールです。ネストしたカードやパネルの角丸をそろえたいときに使えます。
外側と内側に同じ角丸を指定すると、コーナー部分の対角線に沿った隙間が広がって見えます。内側の角丸を「外側の角丸 − 余白」にすると、余白が均等のときは隙間がどの角度でも余白と同じ幅になります。
使い方
- 外側の角丸から内側を求めるか、内側の角丸から外側を求めるかを選びます
- 計算方向で選んだ側の角丸を入力します
- 余白を入力します。上下左右を同じ値にするか、縦と横で分けるかを選べます
- プレビューで隙間の広がり方を確認し、CSSをコピーします
角丸の計算
内側の角丸は「外側の角丸 − 余白」です。余白を縦横で分けた場合は、短い方の余白で計算されます。計算方向を内側から外側にした場合は、内側の角丸に余白を足して外側を求めます。
calc()による書き方
余白が均等のときは、CSS変数を使ったcalc()の書き方も出力できます。外側の角丸や余白を後で変更しても、内側の角丸を手で直さずに済みます。
主な設定項目
計算方向
切り替えると、計算済みの値が入力側に引き継がれます。
プリセット
よく使われる角丸と余白の組み合わせを選ぶと、外側の角丸と余白が設定されます。内側から外側を求める方向では選べません。
活用シーン
- カードの外枠と内側コンテナの角丸を自然に揃えたいとき
- モーダルやダイアログの内側要素に角丸を合わせたいとき
- 縦横で異なる余白の組み合わせを検討したいとき
- デザインシステムで角丸と余白の組を決めたいとき
使うときの注意点
- 余白が外側の角丸以上になると、内側の角丸は0px（直角）になります
- 角丸は0〜120px、余白は0〜80pxの範囲で入力できます
- 内側から外側を計算すると、結果が角丸の入力上限を超えることがあります
- プレビューは隙間の広がり方の確認用で、実際の大きさを再現するものではありません
