---
system: material
category: foundations
topic: shape
content_type: guidance
status: latest
version_label: "M3"
retrieved: 2026-05-11
source_url: https://m3.material.io/styles/shape
tags: [shape, corner-radius, expressiveness, components, rounding]
---

# Material Design 3 — Shape

## Overview

Shape is one of M3's most distinctive design tools. Where M2 used flat or lightly rounded corners, M3 makes corner radius a first-class expressive dimension — different corner sizes communicate component identity, hierarchy, and interaction affordance.

Shape in M3 is exclusively concerned with **corner rounding** (border-radius). Standard rectangular components use uniform corners, though individual corners can be adjusted to create asymmetrical shapes.

---

## M3 Expressive Update (May 2025)

The M3 Expressive update significantly expanded the shape system:

- **35 new abstract shapes** added to the Material Shape Library (Figma Design Kit) and Jetpack Compose
- **Shape morphing** built into Material shapes for animating between shapes in response to interaction
- **New corner radius tokens:**

| Token | Value |
|---|---|
| `large-increased` | 20dp |
| `extra-large-increased` | 32dp |
| `extra-extra-large` | 48dp |

- **Fully-rounded corners** are now defined using the `full` token (previously expressed as 50% of component size)

---

## Shape Principles

**Use shapes and type in harmony.** Shapes echo the visual character of the typeface. Round, expansive shapes pair well with geometric or humanist typefaces; square, angular shapes suit more utilitarian or monospaced fonts.

**Morph shapes to communicate state.** Shape morphing should respond to interaction — selected states, in-progress actions, environmental changes (time, temperature, sound). Think about how shapes react to tapping, swiping, scrolling, releasing, and long-pressing.

**Embrace tension.** Contrasting shapes (round alongside square) create dynamic, memorable design. M3 Expressive moves away from exclusively rounded shapes — sharp shapes convey precision, energy, and differentiation.

**Shape is versatile, not semantic.** Avoid assigning a fixed literal meaning to a single shape. A waveform can express loading progress, but progress could equally be shown with rotating shapes or morphing. Reserve meaning for content and interaction, not shape alone.

**Use abstract shapes sparingly.** Be intentional. When incorporating diverse shapes, consider how they fit the overall composition, whether they resonate with the product's narrative, and what value they add to the user experience.

---

## Shape Scale

M3 defines a named scale of five corner sizes, plus two absolute values:

| Scale Name | Default Value | Typical Use |
|---|---|---|
| `none` | 0px | Square containers, data tables |
| `extra-small` | 4px | Chips, menu items, tooltips |
| `small` | 8px | Outlined text fields, snackbars |
| `medium` | 12px | Cards (small), some dialogs |
| `large` | 16px | Navigation drawers, cards |
| `extra-large` | 28px | FABs, date pickers, large dialogs |
| `full` | 9999px (pill) | Buttons, badges, search bars |
| `large-increased` | 20px | M3 Expressive add-on |
| `extra-large-increased` | 32px | M3 Expressive add-on |
| `extra-extra-large` | 48px | M3 Expressive add-on |

---

## Shape and Component Identity

Shape is one of the ways M3 communicates component type and purpose. The default shape assignments are intentional:

- **Pill-shaped** (full): Buttons, FABs — conveys action, invitation to interact
- **Extra-large** (28px): Extended FABs, date picker headers — prominent, expressive containers
- **Large** (16px): Navigation drawers, bottom sheets — significant surfaces
- **Medium** (12px): Cards — balanced container presence
- **Small** (8px): Text fields, snackbars — functional but softened
- **Extra-small** (4px): Chips, menus — compact utility elements

---

## Token Structure

On the web, shape tokens are CSS custom properties under `--md-sys-shape-corner-*`:

```css
:root {
  --md-sys-shape-corner-none:        0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small:       8px;
  --md-sys-shape-corner-medium:      12px;
  --md-sys-shape-corner-large:       16px;
  --md-sys-shape-corner-extra-large:         28px;
  --md-sys-shape-corner-full:                9999px;
  /* M3 Expressive add-ons */
  --md-sys-shape-corner-large-increased:     20px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large:   48px;
}
```

Component tokens alias these system values:
```css
/* Example: filled button defaults to full (pill) shape */
--md-filled-button-container-shape: var(--md-sys-shape-corner-full);
```

To make all buttons square, override the component token:
```css
:root {
  --md-filled-button-container-shape: 0px;
}
```

---

## Shape Customization

Shape can be customized at two levels:

**System level** — change a scale step for all components that use it:
```css
:root {
  --md-sys-shape-corner-full: 8px; /* Flattens all pill-shaped elements */
}
```

**Component level** — change shape for a single component type without affecting others:
```css
:root {
  --md-filled-button-container-shape: 0px;
}
```

Component-level overrides are more upgrade-safe and are preferred for product customization.

---

## Shape and Brand Expression

M3 treats the shape scale as a product personality dial. Rounded, expressive shapes (extra-large, full) communicate friendliness, modernity, and playfulness. Reduced rounding (small, none) communicates precision, formality, and density.

Common brand adaptations:
- **Rounded/friendly:** Keep default M3 shapes or increase curvature on secondary surfaces
- **Flat/utilitarian:** Reduce corner radii across the scale, keep only a small amount (4–8px) on interactive elements
- **Strict/corporate:** Set most surfaces to `small` or `none`; reserve rounding only for interactive actions like buttons

Consistency within the scale matters more than any particular value. A product that uses 4px everywhere creates a coherent character; one that uses random values (6px here, 11px there) creates visual noise.

---

## Do's and Don'ts

**Do:**
- Use the named scale steps — don't invent values outside the scale
- Let component defaults stand where they match your brand — overriding everything is unnecessary
- Use `extra-large` and `full` intentionally for high-emphasis or interactive elements
- Apply consistent shape logic across component families (don't round buttons but square cards with no rationale)

**Don't:**
- Override all shapes to 0px globally unless a strictly flat aesthetic is intentional and consistent
- Use asymmetric corner radii on standard components — M3's shape system uses uniform corners
- Confuse shape customization with spacing or size adjustments

---

## Sources

- Shape Overview: https://m3.material.io/styles/shape/overview
- Material Web Theming (shape): https://material-web.dev/theming/material-theming/ (see Shape section)