---
url: /styles/shape/corner-radius-scale.md
description: >-
The M3 shape system includes original shapes, a corner radius scale, and
built-in shape morphing
---
# Shape
The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing
[Overview & principles](overview-principles.md) · **Corner radius scale** · [Shape morph](shape-morph.md)
Material components use a corner radius scale to define all rectangular shapes, such as buttons, carousels, and dialogs.
M3 defines corner radii using a shape scale. This can be used to create both uniform and asymmetrical shapes.
## Shape tokens
Material has shape corner tokens to define all corners, and corner-value tokens for individual corners. [Learn more about design tokens](../../foundations/design-tokens/overview.md)
::: token-table token-type-unspecified-20543ce18892f7d9-92e5098b
**Shape tokens** · 1 token set · 24 tokens · [live token table](https://m3.material.io/styles/shape/corner-radius-scale) · DSDB `TOKEN_TYPE_UNSPECIFIED.20543ce18892f7d9`
* Default context: none
* Not configurable here (group default used): Theme: Light · Platform: Android · Audience: 1P Baseline · Motion scheme: Standard · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.
**Shape** · `md.sys.shape` · 24 tokens
Corner shape and directional modifier (like "top" or "end") tokens.
| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.sys.shape.corner.full` | Shape | — | `Circular (fully rounded)` |
| All tokens | `md.sys.shape.corner.extra-large.top` | Shape | — | `Rounded corners: top-left 28dp, top-right 28dp` |
| All tokens | `md.sys.shape.corner.extra-large` | Shape | — | `Rounded corners 28dp` |
| All tokens | `md.sys.shape.corner.large.top` | Shape | — | `Rounded corners: top-left 16dp, top-right 16dp` |
| All tokens | `md.sys.shape.corner.large.end` | Shape | — | `Rounded corners: top-right 16dp, bottom-right 16dp` |
| All tokens | `md.sys.shape.corner.large.start` | Shape | — | `Rounded corners: top-left 16dp, bottom-left 16dp` |
| All tokens | `md.sys.shape.corner.large` | Shape | — | `Rounded corners 16dp` |
| All tokens | `md.sys.shape.corner.medium` | Shape | — | `Rounded corners 12dp` |
| All tokens | `md.sys.shape.corner.small` | Shape | — | `Rounded corners 8dp` |
| All tokens | `md.sys.shape.corner.extra-small.top` | Shape | — | `Rounded corners: top-left 4dp, top-right 4dp` |
| All tokens | `md.sys.shape.corner.extra-small` | Shape | — | `Rounded corners 4dp` |
| All tokens | `md.sys.shape.corner.none` | Shape | — | `Rounded corners 0dp` |
| All tokens | `md.sys.shape.corner.large-increased` | Shape | — | `Rounded corners 20dp` |
| All tokens | `md.sys.shape.corner.extra-large-increased` | Shape | — | `Rounded corners 32dp` |
| All tokens | `md.sys.shape.corner.extra-extra-large` | Shape | — | `Rounded corners 48dp` |
| All tokens | `md.sys.shape.corner-value.none` | Length | — | `0dp` |
| All tokens | `md.sys.shape.corner-value.extra-small` | Length | — | `4dp` |
| All tokens | `md.sys.shape.corner-value.small` | Length | — | `8dp` |
| All tokens | `md.sys.shape.corner-value.medium` | Length | — | `12dp` |
| All tokens | `md.sys.shape.corner-value.large` | Length | — | `16dp` |
| All tokens | `md.sys.shape.corner-value.large-increased` | Length | — | `20dp` |
| All tokens | `md.sys.shape.corner-value.extra-large` | Length | — | `28dp` |
| All tokens | `md.sys.shape.corner-value.extra-large-increased` | Length | — | `32dp` |
| All tokens | `md.sys.shape.corner-value.extra-extra-large` | Length | — | `48dp` |
:::
### Corner radius scale
The Material 3 shape system uses a size-based scale with ten styles. Styles are assigned to components based on the desired amount of roundedness.
1. None - 0dp
2. Extra small - 4dp
3. Small - 8dp
4. Medium - 12dp
5. Large - 16dp
6. Large increased - 20dp
7. Extra large - 28dp
8. Extra large increased - 32dp
9. Extra extra large - 48dp
10. Full - fully rounded corners
[Apply shape styles using tokens](../../foundations/design-tokens/overview.md)
Steps on the scale are named for the amount of roundedness applied to the corner
M2: Three-level shape scale based on the size of the component container
M3: Ten-level shape scale based on the roundedness of shape corners
## Symmetry
Components can have either symmetric or asymmetric corner shapes. Symmetric shapes have the same values for all corners, while asymmetric shapes can have corners with different values.
Both symmetric and asymmetric shapes use the same 10-step scale.
Asymmetrical shapes are used in M3 components with closely-grouped items, such as menus and split buttons. These are called **inner corners**.
**Inner corner **component tokens always map to individual corner shape tokens
## Customizing shapes
Generally, products should consistently use the Material 3 shape styles. However, customization is sometimes necessary, and even encouraged, for hero moments or custom components. Shapes can be customized at the **style** or **component** level.
### Style changes
The corner radius shape style, like **medium**, can be customized to be a different size.
This applies the change to all components mapped to that shape style, unless they have an override.
Customizing the corner size of the **medium** style applies the change to all components using this style, such as cards and small FABs
### Component changes
The style of a specific component, such as a button, can be changed by customizing which corner radius shape style it maps to.
For example, by default, buttons are mapped to the **full** corner radius shape style. If your product needs a less rounded shape, remap the token to another style in the shape scale, such as **small** or **medium**.
Remapping the shape for a component to a different style applies the change to just that component across the UI
The shape style family can be customized from **rounded** to **cut**. This makes the corner a straight line instead of curved.
Add extra padding to avoid cutting off content in information-dense components.
For example, a large cut corner on a card will clip content and images in the area more than a rounded corner of the same size.
::: warning Caution
Be careful not to apply large or full corners to information-dense components, such as cards
:::
::: tip Do
Shapes can be intentionally rounder to add more visual variety
:::
::: tip Do
Add unexpected moments by switching between square and fully rounded shapes
:::
### Adjust for optical roundness
When nesting rounded objects, avoid using the same corner radii for both objects. This can make the corners look unbalanced.
Instead, adjust the corner radii to be proportional to each other; this is called optical roundness. To calculate optical roundness:
* Outer radius - padding = inner radius
* For example: 48dp - 14dp = 34dp
1. Padding
2. Outer radius
3. Inner radius
::: tip Do
Use different corner radii values for nested components so they have optical roundness
:::
::: danger Don't
Avoid using the same corner radius value for nested objects
:::
### Using the shape library
The Material 3 shape library can be used to create more interesting containers. Use the shape library for mostly visual elements. Avoid applying unconventional shapes to text-heavy containers.
Shapes should be used sparingly to provide a stronger emphasis and moments of delight.
Leverage the Material shape library for moments of delight