# Nested Border Radius Formula

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

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 is 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](https://xiry.app/topics/design.md)
- 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](https://x.com/pakastin/status/1711402297106854347): Designers commonly mis-match radii on nested elements; this gives a simple rule so concentric corners stay visually consistent.

## Related

- [Nested Border Radius Formula](https://xiry.app/resources/nested-border-radius-formula): Rule of thumb for calculating concentric nested border radii (Tip, Free)
- [Recent](https://xiry.app/resources/recent): Curated daily gallery of exceptional web, product, and brand design. (Website, Free)
- [7 Rules for Vibe Coding Beautiful UI](https://xiry.app/resources/7-rules-for-vibe-coding-beautiful-ui): Practical rules to prevent generic styling when generating frontends with AI (List, Free)
- [Colormind](https://xiry.app/resources/colormind): AI-powered color scheme generator that previews palettes on UI templates (Web app, Free)
- [Craft](https://xiry.app/resources/craft): A collection of design engineering concepts and practical UI craft lessons (Website, Open source)
- [Design Inspiration Directory](https://xiry.app/resources/design-inspiration-directory): Curated list of niche galleries for web, dashboard, and branding inspiration (List, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/nested-border-radius-formula-2584

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.