Community
Back to Discussions & Q&A
Accepted Solutionbuilder extensibility

Writing dynamic Block Builders with concentric radius nesting rules

Sarah Chen
Sarah Chen@sarahchen
Top ContributorVerified Creator
•Feb 22, 2026
When authoring custom community blocks for Studio, what is the best practice for nesting cards inside dialogs or container panels so the borders stay perfectly concentric?
Reproduction / Context
// Outer container: rounded-[var(--radius-panel)]
<div className="rounded-[var(--radius-panel)] border border-hairline bg-surface p-5">
  {/* Inner nested element uses concentric padding utility */}
  <div className="rounded-panel-p5 border border-hairline bg-surface-raised p-4">
    <p className="text-fg text-sm">Concentric inner card</p>
  </div>
</div>
1520 total views

1 Community Answers

Elena Rostova
Elena Rostova@elenarostova
Design QA ExpertVerified Creator
Verified Solution
Always follow R_inner = max(floor, R_outer - Padding). In `@shavin/ui`, we provide `rounded-panel-p5` (for 20px padding) and `rounded-panel-p3` (for 12px padding) so you never have to calculate inline px mathematics. Never use `rounded-lg` or `rounded-2xl` on panel containers.
Feb 22
Post an Answer(Active: @avinash)