Nested Border-Radius Optimization
Calculate a concentric inner border-radius
Settings
The chosen side becomes the input and the other side is calculated
Preview
Optimal inner radius12px= max(0, 28px − 16px)
The padding reaches the outer radius, so the inner corners are square
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
- Choose the direction: derive the inner radius from the outer radius, or the outer radius from the inner radius
- Enter the radius for the side chosen in the direction setting
- Enter the padding. Use one value for all sides, or separate vertical and horizontal values
- 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
