ConcentricRectangle

A rounded rectangle whose corner radii are calculated to be concentric with a container shape — sharing the same center point. The math: innerRadius = containerRadius − inset − borderWidth

npx shadcn add https://mariusz.github.io/concentric-rectangle/r/concentric-rectangle.json
container r=40pxinset 16pxborder 0pxinner r=24px
parent containervisible inset area
Controls

Nested ConcentricRectangles

Each layer is a ConcentricRectanglenested inside the previous one. Corner radii are automatically derived from the parent's computed style.

Preset examples

All concentric
Notes-style sheet
Mixed corners
Asymmetric