Skip to content
On this page

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

ShapeToken
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
css
:root {
  --md-sys-shape-corner-small: 4px;
  --md-sys-shape-corner-medium: 6px;
  --md-sys-shape-corner-large: 8px;
}
Shape has loaded