Shape ​

tag: 'docType:howTo'

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>.

• All tokens

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