Radius

Primitive and semantic corner roles governed by the nested-radius rule: inner radius equals outer radius minus padding.

Nested corners

Concentric surfaces must follow one geometry rule so their corners share a common center.

inner radius = outer radius − padding

16px − 4px = 12px

PreviewNameValue

--sous-ref-radius-00px

--sous-ref-radius-22px

--sous-ref-radius-44px

--sous-ref-radius-66px

--sous-ref-radius-88px

--sous-ref-radius-1010px

--sous-ref-radius-1212px

--sous-ref-radius-1616px

--sous-ref-radius-2020px

--sous-ref-radius-2424px

--sous-ref-radius-3232px

--sous-ref-radius-full9999px

--sous-radius-control12px

--sous-radius-control-sm6px

--sous-radius-overlay16px

--sous-radius-pill9999px

--sous-radius-surface16px

--sous-radius-surface-lg16px

--sous-radius-tab-active10px