Foundations

Shape

Shape sets the character and hierarchy of containers. Material provides a nonsemantic magnitude scale and directional compositions; component recipes add intent. Choose a contextual recommendation in Use, or tune the theme profile in Customize.

Three rules

Shape should explain structure

Scale with the elementSmall controls use tighter corners than large surfaces.

Keep families coherentNested objects remain rounded or sharp together.

Preserve hierarchyOuter containers can be softer than their inner parts.

Material baseline

Ten corner styles

Select one style to compare its Material baseline, active theme value, CSS token and Tailwind utility. The picker hands the chosen one over.

Selected style

Medium

Cards and groups. Material baseline: 12px.

Active theme8px

--md-sys-shape-corner-medium rounded-md Resolve and copy in the picker →

Three things to understand

Beyond a single radius

Each has a guide of its own, reachable from the Learn sidebar or these cards.

Corner roles & composition Corner values are primitives; complete shapes are four of them. Top, bottom, start and end are the same values rearranged. Nested corners Concentric arcs need the inner radius to be the outer radius minus the inset. Reuse the parent value and the corner bulges. 35 expressive silhouettes Material 3 Design Kit geometry, separate from the corner scale. For media, avatars and decoration — not for content-heavy surfaces.

Shape morph

Connect states through geometry

The Material 3 Design Kit defines each silhouette's geometry. Shape owns those endpoints; Material motion tokens define how the browser moves between them over time.

Animate a silhouette in Motion →