Concentric Border Radius for Nested Elements

When nesting rounded elements, inner radius must equal outer radius minus the gap. Same radius on both creates uneven curves.

Incorrect (same radius on both):

.outer {
  border-radius: 16px;
  padding: 8px;
}

.inner {
  border-radius: 16px;
}

Correct (concentric radius):

.outer {
  --padding: 8px;
  --inner-radius: 8px;

  border-radius: calc(var(--inner-radius) + var(--padding));
  padding: var(--padding);
}

.inner {
  border-radius: var(--inner-radius);
}

Reference: Concentric Border Radius