Shape

Shape can direct attention, communicate state, and express brand.

Corners use a range of shape scales for their roundness, from straight 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;
}