# Nested Border Radius Formula

> Rule of thumb for calculating concentric nested border radii

A UI design rule stating that an outer corner radius should equal the inner radius plus padding. This maintains concentric curvature between nested rounded containers instead of visual distortion.

## How it works

For nested rounded rectangles: outer radius = inner radius + padding. Example from the thread diagram: 24px outer radius with 8px padding → 16px inner radius (correct). Setting outer r = inner r (e.g. 24px/24px) makes the curves look wrong. The tweet itself presents the 'formula' as a joke — a giant quantum field theory path integral — with a diagram showing a 20px inner radius yielding a 17.2px outer radius.

## What it is for

- Style nested UI cards and buttons with consistent curvature
- Calculate container corner radii based on inner element padding
- Fix clashing curves in nested rounded design components

## Key points

- Core formula: outer radius = inner radius + padding
- Prevents visual misalignment caused by identical inner and outer radii
- Maintains smooth concentric spacing between nested containers

## 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, styling, design tips

## Why it was saved

- [@itsnotnabeel, 9 October 2023](https://x.com/itsnotnabeel/status/1711372420886429971): Keeps the curves of nested rounded rectangles concentric instead of clashing.

## Related

- [Nested Border Radius Formula](https://xiry.app/resources/nested-border-radius-formula-2584): Simple formula to keep concentric rounded corners visually balanced in UI design (Tip, Free)
- [Craft](https://xiry.app/resources/craft): A collection of design engineering concepts and practical UI craft lessons (Website, Open source)
- [Stop Designing Custom Icons](https://xiry.app/resources/stop-designing-custom-icons): Design tip advising using established icon libraries over hand-crafting vector icons (Tip, Free)
- [Grainient](https://xiry.app/resources/grainient): Curated library of grainy, smooth, and animated gradient background assets (Website, Freemium)
- [Recent](https://xiry.app/resources/recent): Curated daily gallery of exceptional web, product, and brand design. (Website, Free)
- [Lucide](https://xiry.app/resources/lucide-2127): Open-source, tree-shakable icon library for web and mobile interfaces. (Website, Open source)

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

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.