What is Nested Border-Radius Calculator?

When using the same border-radius for parent and child elements creates visual imbalance, or you want to achieve unified rounded corners in a design system—this tool can help. It automatically calculates visually balanced child element border-radius values relative to the parent's rounded corners.

• Automatically calculates inner border-radius
• Instant result verification with real-time preview
• One-click CSS output copy

Useful for card designs, icon placement in buttons, dashboard panels, and any overlapping element rounded corner design.

How to Use

Enter the outer border-radius (parent element's rounded corners) and padding (space between parent and child). The inner border-radius (child element's rounded corners) is automatically calculated, displaying a preview and CSS code.

Calculation Formula

Inner border-radius = Outer border-radius - Padding

Example: Outer 20px, Padding 5px → Inner 15px

Why It's Needed

When parent and child elements use the same border-radius value, the child sits inside the parent, changing the perceived curvature and making corners appear thicker and more rounded.

This happens because padding (gap) between elements affects how corners appear. Repeatedly adjusting manually is inefficient, but this tool automatically calculates optimal values.

Use Cases

Card Design

Achieve visually uniform rounded corners for card component backgrounds and content areas.

Buttons and Icons

Easily set balanced rounded corners for icons inside buttons or focus state styling.

Layout Design

Create cohesive designs in multi-layered UIs like sidebars and main content, or dashboard panel layouts.

Design Benefits

Visual Harmony

Calculated inner border-radius ensures even spacing between elements, creating professional and polished designs.

Implementation Efficiency

Eliminates manual adjustments and trial-and-error, significantly streamlining design system construction and maintenance.

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

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