1---
2title: Concentric Border Radius for Nested Elements
3impact: HIGH
4tags: visual, border-radius, concentric, nesting
5---
6 
7## Concentric Border Radius for Nested Elements
8 
9When nesting rounded elements, inner radius must equal outer radius minus the gap. Same radius on both creates uneven curves.
10 
11**Incorrect (same radius on both):**
12 
13```css
14.outer {
15  border-radius: 16px;
16  padding: 8px;
17}
18 
19.inner {
20  border-radius: 16px;
21}
22```
23 
24**Correct (concentric radius):**
25 
26```css
27.outer {
28  --padding: 8px;
29  --inner-radius: 8px;
30 
31  border-radius: calc(var(--inner-radius) + var(--padding));
32  padding: var(--padding);
33}
34 
35.inner {
36  border-radius: var(--inner-radius);
37}
38```
39 
40Reference: [Concentric Border Radius](https://jakub.kr/work/concentric-border-radius)
41