Material Design 3 Shape and Containment
Overview
This skill guides the implementation of Material Design 3 (M3) Expressive shape and containment principles to create friendly, approachable, and visually distinct interfaces.
Keywords: Material Design 3, M3, shape, rounded corners, border radius, containment, containers, morphing shapes, component shapes
Core Principles
Shape Philosophy
M3 Expressive uses shape to:
- Create Personality: Distinctive shapes make interfaces memorable and approachable
- Establish Hierarchy: Different corner radii indicate importance and containment levels
- Express Brand: Shape language can be customized to match brand identity
- Guide Attention: Rounded corners naturally draw the eye and feel inviting
- Support Interaction: Shape morphing provides visual feedback
Shape Characteristics
Rounded Corners (Primary characteristic):
- M3 favors rounded corners over sharp angles
- Corners create a friendly, modern aesthetic
- Different radii for different component types
Morphing Shapes:
- Shapes can transform dynamically between states
- Corner radius can animate smoothly
- Supports expressive interactions
Asymmetry (When appropriate):
- Not all corners need the same radius
- Strategic asymmetry adds interest
- Use sparingly for special emphasis
Shape Scale System
M3 Expressive defines an updated shape scale with semantic naming and expanded corner radius tokens:
Shape Families
None (0dp):
- Full-bleed surfaces
- App backgrounds
- No rounding needed
Extra Small (4dp):
- Small buttons
- Chips
- Badges
- Input fields
Small (8dp):
- Text buttons
- Outlined buttons
- Small cards
Medium (12dp):
- Standard buttons
- Cards
- Bottom sheets
Large (20dp — updated from 16dp):
- Large cards
- Featured content
- FABs (Floating Action Buttons)
Extra Large (32dp — updated from 28dp):
- Hero cards
- Featured images
- Special containers
- Dialogs
Extra Extra Large (48dp — new in M3 Expressive):
- Modal sheets
- Full-screen overlays
- Major hero elements
Full (100% of corner radius — now defined as 100% rather than 50%):
- Pills
- Circular buttons
- Profile avatars
- Fully rounded elements
Shape Tokens
Define shape tokens using CSS custom properties:
:root {
/* Corner radii — updated for M3 Expressive */
--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: 20px;
--md-sys-shape-corner-extra-large: 32px;
--md-sys-shape-corner-extra-extra-large: 48px;
--md-sys-shape-corner-full: 9999px;
/* Component-specific shapes */
--md-sys-shape-button: var(--md-sys-shape-corner-full);
--md-sys-shape-card: var(--md-sys-shape-corner-medium);
--md-sys-shape-dialog: var(--md-sys-shape-corner-extra-large);
--md-sys-shape-fab: var(--md-sys-shape-corner-large);
--md-sys-shape-chip: var(--md-sys-shape-corner-small);
--md-sys-shape-text-field: var(--md-sys-shape-corner-extra-small);
--md-sys-shape-bottom-sheet: var(--md-sys-shape-corner-extra-extra-large);
}Expressive Shape Library
M3 Expressive introduces a library of 35 decorative and functional shapes that go beyond simple rounded rectangles. These shapes can be applied to components, backgrounds, and decorative elements, and they support smooth morphing between one another.
Complete Shape Catalog
Geometric Shapes:
- Circle, Square, Slanted Square, Oval, Pill, Semi Circle, Triangle, Diamond, Pentagon, Gem, Arch
Organic and Playful Shapes:
- Flower, Puffy, Puffy Diamond, Clover 4, Clover 8, Bun, Heart, Ghostish, Clam Shell
Burst and Star Shapes:
- Sunny, Very Sunny, Burst, Soft Burst, Boom, Soft Boom, Fan, Arrow
Cookie Shapes (scalloped edges):
- Cookie 4, Cookie 6, Cookie 7, Cookie 9, Cookie 12
Pixel Shapes:
- Pixel Circle, Pixel Triangle
When to Use Expressive Shapes
- Moments of Delight: Use decorative shapes to create visual surprise (loading states, celebrations, onboarding)
- Brand Expression: Choose shapes that reflect brand personality
- State Feedback: Morph shapes to communicate state changes (e.g., a circle morphing into a burst on completion)
- Visual Tension: Combine sharp and rounded, symmetrical and asymmetrical forms for dynamic interest
- Sparingly for Clarity: Abstract shapes (Burst, Puffy, Flower) should be used for emphasis — not as primary containers for content
CSS Implementation of Expressive Shapes
/* Using clip-path for expressive shapes */
.shape-flower {
clip-path: polygon(
50% 0%, 61% 11%, 75% 0%, 80% 15%,
100% 15%, 90% 30%, 100% 50%, 85% 55%,
100% 75%, 80% 75%, 75% 100%, 61% 85%,
50% 100%, 39% 85%, 25% 100%, 20% 75%,
0% 75%, 15% 55%, 0% 50%, 10% 30%,
0% 15%, 20% 15%, 25% 0%, 39% 11%
);
}
/* Using border-radius for organic shapes */
.shape-bun {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* Heart shape */
.shape-heart {
clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
}Component Shape Guidelines
Buttons
Filled Buttons:
- Border radius: Full (50%)
- Completely rounded ends
- Standard height: 40dp
.button-filled {
border-radius: var(--md-sys-shape-corner-full);
padding: 10px 24px;
height: 40px;
}Outlined Buttons:
- Border radius: Full (50%)
- Same as filled buttons
- 1px outline
Text Buttons:
- Border radius: Full (50%)
- No background until hover
- Slightly less padding
FABs (Floating Action Buttons):
- Medium FAB: 40×40dp, 12dp radius (replaces deprecated Small FAB)
- Regular FAB: 56×56dp, 20dp radius
- Large FAB: 96×96dp, 32dp radius
Cards
Standard Cards:
- Border radius: 12dp (medium)
- Consistent on all corners
- Elevation with shadow
.card {
border-radius: var(--md-sys-shape-corner-medium);
padding: 16px;
background: var(--md-sys-color-surface);
}Elevated Cards:
- Same radius as standard
- Additional elevation (shadow)
Outlined Cards:
- 1px outline instead of elevation
- Same corner radius
Dialogs and Sheets
Dialogs:
- Border radius: 32dp (extra-large — updated from 28dp)
- Creates distinctive, modern appearance
- Centered on screen
.dialog {
border-radius: var(--md-sys-shape-corner-extra-large);
padding: 24px;
max-width: 560px;
}Bottom Sheets:
- Top corners: 48dp (extra-extra-large — new)
- Bottom corners: 0dp (none)
- Slides up from bottom
.bottom-sheet {
border-radius: var(--md-sys-shape-corner-extra-extra-large)
var(--md-sys-shape-corner-extra-extra-large)
0 0;
}Side Sheets:
- Leading corners: 32dp
- Trailing corners: 0dp
Input Fields
Text Fields (Filled):
- Top corners: 4dp (extra-small)
- Bottom corners: 0dp
- Creates input well appearance
.text-field-filled {
border-radius: var(--md-sys-shape-corner-extra-small)
var(--md-sys-shape-corner-extra-small)
0 0;
background: var(--md-sys-color-surface-variant);
}Text Fields (Outlined):
- All corners: 4dp
- Consistent roundness
.text-field-outlined {
border-radius: var(--md-sys-shape-corner-extra-small);
border: 1px solid var(--md-sys-color-outline);
}Chips
Input Chips:
- Border radius: 8dp (small)
- With or without leading icon
Filter Chips:
- Border radius: 8dp (small)
- Toggle selection state
Suggestion Chips:
- Border radius: 8dp (small)
- Single action
.chip {
border-radius: var(--md-sys-shape-corner-small);
padding: 6px 12px;
height: 32px;
}Containment Principles
Container Hierarchy
Level 0 (Backgrounds):
- No border radius or minimal (0-4dp)
- Full-screen surfaces
- App background
Level 1 (Primary containers):
- 12dp radius
- Cards, list items
- Primary content areas
Level 2 (Secondary containers):
- 12-16dp radius
- Nested cards
- Grouped content
Level 3 (Tertiary containers):
- 16-28dp radius
- Dialogs, modals
- Overlay content
Grouped Components
When grouping multiple components:
Adjacent Buttons:
- Maintain individual radii or
- Merge into single container with shared radius
Segmented Buttons:
- First: rounded on left, square on right
- Middle: square on both sides
- Last: square on left, rounded on right
.segmented-button:first-child {
border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full);
}
.segmented-button:last-child {
border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0;
}
.segmented-button:not(:first-child):not(:last-child) {
border-radius: 0;
}Toolbars and App Bars:
- Top app bar: 0dp (or small radius on bottom)
- Bottom app bar: 0dp (or small radius on top)
- FAB can extend beyond app bar
Morphing Shapes
State Transitions
Shapes can morph between states to show relationships:
Button Press:
.button {
border-radius: var(--md-sys-shape-corner-full);
transition: border-radius 200ms cubic-bezier(0.2, 0, 0, 1);
}
.button:active {
border-radius: var(--md-sys-shape-corner-medium);
}Container Expansion:
.card {
border-radius: var(--md-sys-shape-corner-medium);
transition: border-radius 300ms cubic-bezier(0.2, 0, 0, 1);
}
.card.expanded {
border-radius: var(--md-sys-shape-corner-extra-large);
}Shape Transform:
/* FAB morphing into sheet */
.fab-to-sheet {
transition:
border-radius 400ms cubic-bezier(0.2, 0, 0, 1),
width 400ms cubic-bezier(0.2, 0, 0, 1),
height 400ms cubic-bezier(0.2, 0, 0, 1);
}
.fab-to-sheet.expanded {
border-radius: var(--md-sys-shape-corner-extra-extra-large);
width: 100%;
height: 400px;
}Expressive Shape Morphing
M3 Expressive supports smooth morphing between any of the 35 expressive shapes. This creates moments of delight and communicates state changes visually:
Loading State Morph:
/* Circle morphing to burst on completion */
.loading-indicator {
clip-path: circle(50%);
transition: clip-path 400ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
}
.loading-indicator.complete {
clip-path: polygon(/* burst shape coordinates */);
}Interactive Shape Feedback:
// Using Web Animations API for shape morphing
element.animate([
{ clipPath: 'circle(50%)' },
{ clipPath: 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)' }
], {
duration: 400,
easing: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',
fill: 'forwards'
});Guidelines for Expressive Shape Morphing:
- Use morphing to connect user actions with interface feedback
- Shapes should not carry literal meanings — they add aesthetic variety and direct attention
- Combine sharp and rounded forms for dynamic visual tension
- Use abstract shapes sparingly to preserve clarity and usability
- Pair shape morphing with the M3 motion physics system for natural-feeling transitions
Advanced Shape Techniques
Asymmetric Shapes
Use for special emphasis:
.asymmetric-card {
border-radius: 28px 12px 28px 12px;
}Custom Shapes
Beyond circles and rounded rectangles:
Cutout Shapes:
.cutout-card {
border-radius: var(--md-sys-shape-corner-large);
clip-path: polygon(
0 0,
calc(100% - 40px) 0,
100% 40px,
100% 100%,
0 100%
);
}Notched Shapes (for special components):
.notched-container {
border-radius: var(--md-sys-shape-corner-medium);
position: relative;
}
.notched-container::before {
content: '';
position: absolute;
top: -8px;
right: 20px;
width: 16px;
height: 16px;
background: var(--md-sys-color-surface);
transform: rotate(45deg);
}Responsive Shapes
Adjust shape based on screen size:
.card {
border-radius: var(--md-sys-shape-corner-small);
}
@media (min-width: 600px) {
.card {
border-radius: var(--md-sys-shape-corner-medium);
}
}
@media (min-width: 1024px) {
.card {
border-radius: var(--md-sys-shape-corner-large);
}
}Best Practices
Do's
- ✅ Use semantic shape tokens (not hard-coded values)
- ✅ Maintain consistency across similar components
- ✅ Adjust radius based on component size (larger = more radius)
- ✅ Animate shape transitions smoothly
- ✅ Consider touch targets (min 48×48dp)
- ✅ Use full radius for pill-shaped buttons
- ✅ Apply larger radius to overlay content (dialogs, sheets)
Don'ts
- ❌ Don't mix sharp corners with rounded in same component family
- ❌ Don't use too many different radii (stick to scale)
- ❌ Don't make tiny components with huge radii
- ❌ Don't forget to adjust padding with border radius
- ❌ Don't use square corners unless specifically needed
- ❌ Don't ignore the shape scale system
- ❌ Don't animate border-radius without performance consideration
Accessibility Considerations
Touch Targets
Ensure interactive elements meet minimum size:
.touch-target {
min-width: 48px;
min-height: 48px;
border-radius: var(--md-sys-shape-corner-full);
}Focus Indicators
Shape should not obscure focus:
.button:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
border-radius: var(--md-sys-shape-corner-full);
}High Contrast
Ensure shape is visible:
- Use borders or outlines in high contrast mode
- Don't rely solely on subtle shadows
Performance
Optimization
- Use
border-radiusfor simple rounded corners (GPU accelerated) - Use
clip-pathsparingly (can be expensive) - Animate shape changes with
will-changefor complex morphs - Avoid animating
border-radiuson many elements simultaneously
/* Optimize complex shape animations */
.morphing-container {
will-change: border-radius;
}
.morphing-container.settled {
will-change: auto;
}Checklist for Shape Implementation
When implementing M3 shape system, ensure:
- All shape tokens are defined (extra-small through extra-extra-large and full)
- Updated corner radius values are used (Large: 20dp, XL: 32dp, XXL: 48dp)
- Semantic shape tokens used (not hard-coded px values)
- Buttons use full radius (pill shape)
- Cards use medium radius (12dp)
- Dialogs use extra-large radius (32dp)
- Bottom sheets use extra-extra-large top radius (48dp)
- Input fields use extra-small radius (4dp)
- Chips use small radius (8dp)
- FABs use appropriate radius for size (Medium: 12dp, Regular: 20dp, Large: 32dp)
- Grouped components handle shared edges correctly
- Shape transitions are smooth and spring-based
- Expressive shapes from the 35-shape library are used for moments of delight
- Expressive shape morphing is applied for state feedback when appropriate
- Touch targets meet 48×48dp minimum
- Focus indicators respect rounded shapes
- Performance is optimized (GPU acceleration)
- Responsive adjustments for different screen sizes
Resources
examples/shape-corners.svg— Visual reference SVG showing the complete M3 shape system: corner radius scale (None → Full), corner styles (rounded, cut, squircle, asymmetric), expressive shape library samples, and component shape mapping. Based on https://m3.material.io/styles/shape/overview-principles.- M3 shape overview: https://m3.material.io/styles/shape/overview
- Material Design Tokens (shape): https://github.com/material-foundation/material-tokens