Design · Tip
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's 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
- Topic
- UI Design Tips
- 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: Keeps the curves of nested rounded rectangles concentric instead of clashing.
Related
Simple formula to keep concentric rounded corners visually balanced in UI design
A collection of design engineering concepts and practical UI craft lessons
Design tip advising using established icon libraries over hand-crafting vector icons
Curated library of grainy, smooth, and animated gradient background assets
Curated daily gallery of exceptional web, product, and brand design.
Open-source, tree-shakable icon library for web and mobile interfaces.
Updated