Nested Border-Radius Optimization

What is Nested Border-Radius Optimization?

The Nested Border-Radius Optimization tool helps you achieve visually balanced rounded corners when an inner element sits inside an outer container.

Why this matters

When you apply the same border-radius value to both parent and child elements, the child often looks visually thicker or more rounded because it sits inside the parent and is affected by padding (gap). This perceptual mismatch makes the design look unnatural.

When building component libraries or design systems, repeatedly adjusting values by eye is slow and error-prone. This tool automates that adjustment.

How it works

We use a simple, practical formula: inner = outer − padding. This gives a visually pleasing approximation in most layouts. You can verify the result instantly in the preview and tweak further if needed.

Key Features

Real-time Calculation and Preview

• Input outer border-radius value
• Input padding (gap) value
• Automatic calculation of inner border-radius
• Visual preview with instant feedback
• Guideline display feature to visualize border-radius curves

CSS Output

• Display results in CSS format
• One-click copy functionality
• Ready-to-use format for implementation

How to Use

Basic Usage

1. Outer border-radius: Enter the border-radius value to apply to the parent element
2. Padding (gap): Enter the spacing between parent and child elements
3. Inner border-radius: Calculated result is automatically displayed

Calculation Formula

Inner border-radius = Outer border-radius - Padding (gap)

Example: With outer radius of 20px and padding of 5px
→ Inner radius = 20px - 5px = 15px

Use Cases

Card Design

• Card-type component design
• Harmony between content area and background
• Multi-layered UI elements

Buttons and Icons

• Icon placement inside buttons
• Focus state styling
• Hover effect design

Layout Design

• Section dividers
• Sidebar and main content areas
• Dashboard panel layouts

Design Tips

Visual Harmony

Perfectly calculated inner border-radius ensures even spacing between elements, creating a professional and polished design.

Implementation Efficiency

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

Quick Example

Outer = 48px, Padding = 16px → Inner = 32px

Generated CSS (copyable):

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

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