Shape

M3 Expressive uses a corner radius scale from straight to fully round, with larger steps, "increased" values, and shape morphing between states.

Tokens follow the naming convention --md-sys-shape-corner-<step>.

Steps also come in asymmetric variants (-xs-top, -lg-top, -lg-start, -lg-end, -xl-top) and as single values (--md-sys-shape-corner-value-<step>). Each step also has one token per corner, such as --md-sys-shape-corner-md-start-end, which defaults to the step's all-corner token; override one to shape a single corner.

--md-sys-shape-corner-full is 50cqmin (half the shorter side of the nearest size container), so it rounds fully only inside a container. Components that animate through "full" set it to half their own height.

<div class="box">Medium corners</div>

:root {
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-md-start-end: 0;
}

.box {
  padding: 24px 32px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-start-start-radius: var(--md-sys-shape-corner-md-start-start);
  border-start-end-radius: var(--md-sys-shape-corner-md-start-end);
  border-end-end-radius: var(--md-sys-shape-corner-md-end-end);
  border-end-start-radius: var(--md-sys-shape-corner-md-end-start);
}

Set data-shape-family="cut" on <html> to cut corners in browsers that support corner-shape.