mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
1.5 KiB
1.5 KiB
Shape
Shape can direct attention, communicate state, and express brand.
Shape
Corners use a range of shape scales for their roundness, from straight to fully round.
Note: "cut" corners are not supported.
Tokens
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;
}