---
title: "ネストBorder-Radius最適化 - 同心円の内側の角丸を計算"
description: 外側の角丸と余白から、内側に設定すべきborder-radiusを同心円として計算できるツールです。計算結果をプレビューとCSSで確認できます。
canonical_url: "https://web-toolbox.dev/tools/nested-border-radius-calculator"
meta:
  author: K
  "og:description": 外側の角丸と余白から、内側に設定すべきborder-radiusを同心円として計算できるツールです。計算結果をプレビューとCSSで確認できます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/nested-border-radius-calculator-e4b1d10c.png"
  "og:image:alt": ネストBorder-Radius最適化
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "ネストBorder-Radius最適化 - 同心円の内側の角丸を計算"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **ネストBorder-Radius最適化**

同心円に揃う内側の角丸を計算

## **設定**

選んだ側の角丸が入力欄になり、反対側が計算されます

外側の角丸

px

余白

px

## **プレビュー**

**ガイド線を表示**

**12px**

最適な内側の角丸**12px**= max(0, 28px − 16px)

## **CSS**

```
.outer {
  border-radius: 28px;
  padding: 16px;
}

.inner {
  border-radius: 12px;
}
```

## ネストBorder-Radius最適化ツールとは？

外側の角丸と余白に対し、同心円を保つ内側の`**border-radius**`を計算できるツールです。ネストしたカードやパネルの角丸をそろえたいときに使えます。

外側と内側に同じ角丸を指定すると、コーナー部分の対角線に沿った隙間が広がって見えます。内側の角丸を「外側の角丸 − 余白」にすると、余白が均等のときは隙間がどの角度でも余白と同じ幅になります。

## 使い方

1. 外側の角丸から内側を求めるか、内側の角丸から外側を求めるかを選びます
2. 計算方向で選んだ側の角丸を入力します
3. 余白を入力します。上下左右を同じ値にするか、縦と横で分けるかを選べます
4. プレビューで隙間の広がり方を確認し、CSSをコピーします

### 角丸の計算

内側の角丸は「外側の角丸 − 余白」です。余白を縦横で分けた場合は、短い方の余白で計算されます。計算方向を内側から外側にした場合は、内側の角丸に余白を足して外側を求めます。

### calc()による書き方

余白が均等のときは、CSS変数を使った`**calc()**`の書き方も出力できます。外側の角丸や余白を後で変更しても、内側の角丸を手で直さずに済みます。

## 主な設定項目

### 計算方向

切り替えると、計算済みの値が入力側に引き継がれます。

### プリセット

よく使われる角丸と余白の組み合わせを選ぶと、外側の角丸と余白が設定されます。内側から外側を求める方向では選べません。

## 活用シーン

- カードの外枠と内側コンテナの角丸を自然に揃えたいとき
- モーダルやダイアログの内側要素に角丸を合わせたいとき
- 縦横で異なる余白の組み合わせを検討したいとき
- デザインシステムで角丸と余白の組を決めたいとき

## 使うときの注意点

- 余白が外側の角丸以上になると、内側の角丸は0px（直角）になります
- 角丸は0〜120px、余白は0〜80pxの範囲で入力できます
- 内側から外側を計算すると、結果が角丸の入力上限を超えることがあります
- プレビューは隙間の広がり方の確認用で、実際の大きさを再現するものではありません

**使ってみてどうでしたか？**

最終更新: 2026年10月21日

### **関連ツール**

- [<h4>**アスペクト比計算**</h4>](https://web-toolbox.dev/tools/aspect-ratio-calculator)
- [<h4>**黄金比計算**</h4>](https://web-toolbox.dev/tools/golden-ratio-calculator)
- [<h4>**パーセンテージ・PX計算**</h4>](https://web-toolbox.dev/tools/percentage-px-calculator)
- [<h4>**PX・Rem計算**</h4>](https://web-toolbox.dev/tools/px-rem-calculator)
- [<h4>**営業日カレンダー**</h4>](https://web-toolbox.dev/tools/business-calendar)
- [<h4>**文字数カウンター**</h4>](https://web-toolbox.dev/tools/character-counter)
- [<h4>**カラーコントラストチェッカー**</h4>](https://web-toolbox.dev/tools/color-contrast-checker)
- [<h4>**エポック秒コンバーター**</h4>](https://web-toolbox.dev/tools/epoch-converter)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/nested-border-radius-calculator#webpage","@type":"WebPage","description":"外側の角丸と余白から、内側に設定すべきborder-radiusを同心円として計算できるツールです。計算結果をプレビューとCSSで確認できます。","name":"ネストBorder-Radius最適化 - 同心円の内側の角丸を計算","url":"https://web-toolbox.dev/tools/nested-border-radius-calculator","breadcrumb":{"@id":"https://web-toolbox.dev/tools/nested-border-radius-calculator#breadcrumb"},"isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/nested-border-radius-calculator"]}]},{"@id":"https://web-toolbox.dev/tools/nested-border-radius-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"外側の角丸と余白から、内側に設定すべきborder-radiusを同心円として計算できるツールです。計算結果をプレビューとCSSで確認できます。","name":"ネストBorder-Radius最適化 - 同心円の内側の角丸を計算","operatingSystem":"Windows, macOS, Linux, Android, iOS"},{"@id":"https://web-toolbox.dev/tools/nested-border-radius-calculator#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"ホーム","item":"https://web-toolbox.dev/","position":1},{"@type":"ListItem","name":"計算","item":"https://web-toolbox.dev/categories/calculation","position":2},{"@type":"ListItem","name":"ネストBorder-Radius最適化","item":"https://web-toolbox.dev/tools/nested-border-radius-calculator","position":3}]}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.