Concentric radius

Concentric corners: the inner radius is the outer radius minus the gap, always in sync.

44 − 12 = 32px

The corners share one center.

Change the parent radius or gap and the child follows.

Installation

$ pnpm dlx shadcn@latest add @ssntl/radius-concentric

Usage

css

/* app/globals.css */
@import "../styles/ssntl/radius-concentric.css";

/* In your JSX: the child gets 32 − 8 = 24px */
<div class="rounded-outer-lg p-concentric-2">
  <div class="rounded-inner">…</div>
</div>

The inner radius is the outer radius minus the gap between them: the corners stay parallel.
Change rounded-outer or p-concentric and the child follows.
One level per parent. If the child holds surfaces too, it declares its own rounded-outer-[…].

Code

styles/ssntl/radius-concentric.css

/* Concentric corners: a surface nested inside another takes the outer radius
   minus the gap between them, so both corners share one center.

     Parent:  rounded-outer-{radius} p-concentric-{n}
     Child:   rounded-inner

   rounded-outer-lg p-concentric-2 → the child gets 32 − 8 = 24px, and stays in
   sync when either value changes. One level per parent: a child that also holds
   nested surfaces declares its own rounded-outer-[…]. */

@utility rounded-outer-* {
  --outer-radius: --value(--radius-*, [length]);
  border-radius: var(--outer-radius);
}

@utility p-concentric-* {
  --concentric-gap: calc(var(--spacing) * --value(number));
  --concentric-gap: --value([length]);
  padding: var(--concentric-gap);
}

@utility rounded-inner {
  border-radius: max(
    0px,
    calc(var(--outer-radius, 0px) - var(--concentric-gap, 0px))
  );
}