xiry.

Design · Tip

Nested Border Radius Formula

Simple formula to keep concentric rounded corners visually balanced in UI design

From the Xiry library · Updated 11 October 2026

A UI design and CSS tip for setting matching corner radii on nested elements. Calculating the outer radius as inner radius plus padding avoids awkward visual gaps between concentric corners.

How it works

Formula for nested border radii: outer radius = inner radius + padding. Wrong: setting outer r equal to inner r (e.g. 24px outer with 24px inner). Correct: subtract the padding from the outer radius to get the inner radius (e.g. 24px outer with 8px padding → 16px inner). Example from the joke image: an inner element with 20px radius inside padding gets an outer radius of 17.2px shown on concentric corners. Applies to cards inside containers, buttons inside panels, and similar concentric corner cases in UI/CSS.

What it's for

  • Style a card nested inside a padded container without visual distortion
  • Calculate matching corner radius values when designing UI components in Figma
  • Write consistent CSS rules for nested button or card layouts

Key points

  • Formula: outer radius = inner radius + padding
  • Alternative calculation: inner radius = outer radius - padding
  • Eliminates mismatched concentric corner gaps in nested layouts
  • Applies to cards inside containers, buttons in panels, and modal dialogs

Pricing

Free

Details

Type
Tip
Category
Design
Topic
UI Design Tips
Open source
No
Platforms
other
For
UI designers and frontend developers
Tags
css, ui design, border radius, web design, tips

Why it was saved

  • @pakastin, 9 October 2023: Designers commonly mis-match radii on nested elements; this gives a simple rule so concentric corners stay visually consistent.

Related

Updated