Shape can direct attention, communicate state, and express brand.
Corners use a range of shape scales for their roundness, from straight to fully round.
Note: "cut" corners are not supported.
Shape corners can be set using
CSS custom properties.
Tokens follow the naming convention --md-sys-shape-<token>.
| Shape | Token |
|---|---|
| Corner | --md-sys-shape-corner-none |
--md-sys-shape-corner-extra-small |
|
--md-sys-shape-corner-small |
|
--md-sys-shape-corner-medium |
|
--md-sys-shape-corner-large |
|
--md-sys-shape-corner-extra-large |
|
--md-sys-shape-corner-full |
:root {
--md-sys-shape-corner-small: 4px;
--md-sys-shape-corner-medium: 6px;
--md-sys-shape-corner-large: 8px;
}