# Divider A [divider](https://m3.material.io/components/divider) is a thin line that groups content in lists and containers. Dividers can reinforce tapability, such as when used to separate list items or define tappable regions in an accordion. ![Screenshot of five stacked dividers](images/divider/hero.webp "Dividers separating items in a list.") * [Design article](https://m3.material.io/components/divider) * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/divider) ## Usage Use full width dividers to separate larger sections of unrelated content. ![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.webp "Full width divider example") ```html

Lorem ipsum...

Lorem ipsum...

``` ### Inset dividers Use inset dividers to separate related content within a section. ![A list of design system names separated by an inset divider](images/divider/usage-inset.webp "Inset divider example") ```html

Material 2

Material 3

``` Inset dividers are equally indented from both sides of the screen by default. Use `inset-start` or `inset-end` to change this. ![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.webp "Leading inset divider example") ```html

Material 2

Material 3

``` ## Accessibility Dividers are decorative by default and not announced by assistive technology. Add a [`role="separator"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) attribute to non-decorative dividers that should be announced. ```html ``` ## Theming Divider supports [theming](../theming/README.md) and can be customized with CSS custom property tokens. ### Tokens Token | Default value ------------------------ | -------------------------------- `--md-divider-color` | `--md-sys-color-outline-variant` `--md-divider-thickness` | `1px` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-divider.scss) ### Example ![A customized divider with a different color and thickness](images/divider/theming.webp "Divider theming example.") ```html

Lorem ipsum...

Lorem ipsum...

``` ## API ### MdDivider <md-divider> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `inset` | `inset` | `boolean` | `false` | Indents the divider with equal padding on both sides. | | `insetStart` | `inset-start` | `boolean` | `false` | Indents the divider with padding on the leading side. | | `insetEnd` | `inset-end` | `boolean` | `false` | Indents the divider with padding on the trailing side. |