Radius
Radius Presets Scale
| Preset | Small Control (--radius-lg) | Medium Control (--radius-xl) | Surface Panel (--radius-panel) |
|---|---|---|---|
| None | 0px | 0px | 0px |
| Small | 0.25rem | 0.375rem | 0.5rem |
| Medium | 0.5rem | 0.75rem | 1rem |
| Large | 0.75rem | 1rem | 1.5rem |
| Full | 9999px | 9999px | 1.5rem |
Concentric Radius Math (R_inner = max(0, R_outer - Padding))
When nesting interactive elements or images inside a container panel, the inner radius must step down by the container's padding amount (R_inner = max(0, R_outer - P)). This guarantees outer and inner curves share the same curvature center, eliminating awkward corner gaps.
Concentric Curves (Correct Math)
Inner Surface (R_inner = R_outer - P)
Outer panel uses --radius-panel with p-4 (16px). Inner surface uses --radius-lg (12px). Curvatures align harmoniously.
✕ Mismatched Curvature (Distorted)
Inner Surface (Same Panel Radius)
Inner element duplicates outer --radius-panel without subtracting padding, producing mismatched corners and visual distortion.