Shape

Action--md-shape-action28pxButton, IconButton, ButtonGroup, Select, DatePicker actions, FAB menu actions

Field--md-shape-field16pxTextField rounded containers

Field square--md-shape-field-square12pxTextField square containers, InputOtp inputs

Chip--md-shape-chip8pxChip, Menu inactive containers, Tabs active tonal containers, TimePicker fields

Card--md-shape-card12pxCard, rich Tooltip, Tabs tonal containers and focus indicators

Popover--md-shape-popover16pxMenu surfaces, active menu containers, detached SideSheet surfaces

Compact--md-shape-compact4pxSnackbar and plain Tooltip surfaces

Overlay--md-shape-overlay28pxDialog, DatePicker surfaces, TimePicker surfaces

Indicator--md-shape-indicatorfullLinearProgressIndicator, LoadingIndicator, NavigationRail active indicators, ListItem indicators

FAB--md-shape-fab16pxFloatingActionButton and FloatingActionButtonMenu triggers

CSS

:root {
  --md-shape-action: 28px;
  --md-shape-field: 16px;
  --md-shape-field-square: 12px;
  --md-shape-chip: 8px;
  --md-shape-card: 12px;
  --md-shape-popover: 16px;
  --md-shape-compact: 4px;
  --md-shape-overlay: 28px;
  --md-shape-indicator: 9999px;
  --md-shape-fab: 16px;
}

Divider

Dividers separate related content into clear groups.

Section one

Section two

Anatomy

Highlight

Element	Part	Selector
`<div>`	root	`[data-scope="divider"][data-part="root"]` `left_clickLMB`Copy

Props

Name	Description	Default	Control
`orientation`Optional	Direction of the divider line. `horizontalvertical`	`"horizontal"`	horizontalvertical
`inset`Optional	Apply inset spacing on either side of the divider. `nonestartendboth`	`"none"`	nonestartendboth
`thickness`Optional	Line thickness. Such as '1px' or '0.125rem'. `string \| undefined`	`undefined`
`spacing`Optional	Symmetric space around the divider. Such as '0.75rem'. `string \| undefined`	`undefined`

Events0

No events documented.

Slots0

No slots documented.

Styling4

Preview

Token	Description
`--md-divider-color`Color Fallback`var(--md-sys-color-outline-variant)`	Controls color.
`--md-divider-inset`Layout Fallback`--dp(16)`	Controls inset.
`--md-divider-spacing`Style Fallback`0`	Controls spacing.
`--md-divider-thickness`Layout Fallback`0.0625rem`	Controls thickness.

Examples

Default

Account

Preferences

Inset

Vertical

Custom Spacing

Header

Content