ネストBorder-Radius計算ツールとは？

外側の border-radius と内側までの余白から、内側要素に合う角丸サイズを計算できるツールです。親要素と子要素に同じ角丸を入れたときの「内側だけ丸く見えすぎる」違和感を減らしたいときに役立ちます。

カードの内枠、ネストしたパネル、角丸ボタンの内側要素など、重なった UI の角丸をそろえたい場面で便利です。

使い方

1. 外側要素の border-radius を入力します。
2. 外側と内側の間の padding を入力します。
3. 内側に設定すべき border-radius が自動で表示されます。
4. プレビューと CSS 出力を確認して使います。

入力はリアルタイムで反映されるため、見た目を見ながら微調整できます。

計算の考え方

このツールの計算式はシンプルです。

内側の border-radius = 外側の border-radius - padding

たとえば外側が 20px、余白が 8px なら、内側は 12px になります。

padding が外側の角丸以上になる場合、内側の角丸は 0px として扱われます。

入出力例

外側の角丸を 48px、padding を 16px にすると、出力は次のようになります。

.outer-element {
  border-radius: 48px;
  padding: 16px;
}

.inner-element {
  border-radius: 32px;
}

活用シーン

• カードの外枠と中身の角丸を自然に揃えたいとき
• モーダルやパネルの内側コンテナをきれいに収めたいとき
• ボタン内のアイコン背景やフォーカス枠の角丸を合わせたいとき
• デザインシステムでネストした角丸ルールを揃えたいとき

使うときの注意点

• この計算はシンプルな outer radius - padding を前提にしています
• 複雑な形状や非対称の角丸では、最終的に見た目で確認したほうが安全です
• padding が大きいと内側の角丸はすぐに小さくなるため、余白とのバランスも合わせて見る必要があります