---
title: "Nested Border-Radius Optimization - Calculate the concentric inner radius | Web ToolBox"
description: "Calculate the border-radius that keeps nested elements concentric with an outer radius and padding. Check the result in the preview and CSS."
canonical_url: "https://web-toolbox.dev/en/tools/nested-border-radius-calculator"
meta:
  author: K
  "og:description": "Calculate the border-radius that keeps nested elements concentric with an outer radius and padding. Check the result in the preview and CSS."
  "og:image": "https://web-toolbox.dev/og/en/tools/nested-border-radius-calculator-8e53aa3f.png"
  "og:image:alt": "Nested Border-Radius Optimization"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Nested Border-Radius Optimization - Calculate the concentric inner radius | Web ToolBox"
---

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

# **Nested Border-Radius Optimization**

Calculate a concentric inner border-radius

## **Settings**

The chosen side becomes the input and the other side is calculated

Padding

px

## **Preview**

**Show guides**

**12px**

Optimal inner radius**12px**= max(0, 28px − 16px)

## **CSS**

CSS format

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

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

## What is Nested Border-Radius Optimization?

Given an outer radius and padding, this tool calculates the inner `**border-radius**` that keeps nested elements concentric. It is useful for aligning the corners of nested cards and panels.

Setting the same radius inside and out widens the gap along the diagonal at the corners. Setting the inner radius to the outer radius minus the padding keeps the gap equal to the padding at every angle when the padding is uniform.

## How to Use

1. Choose the direction: derive the inner radius from the outer radius, or the outer radius from the inner radius
2. Enter the radius for the side chosen in the direction setting
3. Enter the padding. Use one value for all sides, or separate vertical and horizontal values
4. Check how the gap widens in the preview and copy the CSS

### How the Radius Is Calculated

The inner radius is the outer radius minus the padding. When the padding is split into vertical and horizontal values, the smaller one is used. When the direction is set from the inner side, the padding is added back to the inner radius to derive the outer radius.

### Writing with calc()

When the padding is uniform, a `**calc()**` form built on CSS variables is also output. Later changes to the outer radius or padding no longer require manually updating the inner radius.

## Key Settings

### Direction

Switching carries the calculated values over to the input side.

### Presets

Selecting a commonly used combination of radius and padding sets the outer radius and padding. They cannot be selected while deriving the outer radius.

## Use Cases

- Aligning the corners of a card frame and its inner container naturally
- Matching the radius of elements inside modals and dialogs
- Trying different vertical and horizontal padding combinations
- Deciding radius-and-padding pairs for a design system

## Things to Keep in Mind

- When the padding reaches the outer radius, the inner radius becomes 0px (square)
- The radius accepts values from 0 to 120px, and the padding accepts values from 0 to 80px
- Calculating from the inner side can produce a radius above the input limit
- The preview is for checking how the gap widens, not for reproducing exact sizes

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/nested-border-radius-calculator#webpage","@type":"WebPage","description":"Calculate the border-radius that keeps nested elements concentric with an outer radius and padding. Check the result in the preview and CSS.","name":"Nested Border-Radius Optimization - Calculate the concentric inner radius","url":"https://web-toolbox.dev/en/tools/nested-border-radius-calculator","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/nested-border-radius-calculator"]}]},{"@id":"https://web-toolbox.dev/en/tools/nested-border-radius-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Calculate the border-radius that keeps nested elements concentric with an outer radius and padding. Check the result in the preview and CSS.","name":"Nested Border-Radius Optimization - Calculate the concentric inner radius","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

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