Shape

Shape draws attention, shows state and expresses a brand.

Corners use a range of shape scales for their roundness, from square to fully round.

bookmark

"cut" corners are not supported.

Shape corners can be set using CSS custom properties. Tokens follow the naming convention --md-sys-shape-<token>.

• All tokens

:root {
  --md-sys-shape-corner-small: 4px;
  --md-sys-shape-corner-medium: 6px;
  --md-sys-shape-corner-large: 8px;
}