material-inspired-component-library/dist/divider.css

The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.

:root{--md-sys-divider-thickness: 1px;--md-sys-divider-inset-margin: 16px;--md-sys-divider-space: 4px}body{--md-sys-divider-color: var(--md-sys-color-outline-variant)}.micl-divider{width:100%;height:0;margin-block:var(--md-sys-divider-space);margin-inline:0;border:0;border-block-start:var(--md-sys-divider-thickness) solid var(--md-sys-divider-color)}.micl-divider-inset{width:calc(100% - 2*var(--md-sys-divider-inset-margin));height:0;margin-block:var(--md-sys-divider-space);margin-inline:var(--md-sys-divider-inset-margin);border:0;border-block-start:var(--md-sys-divider-thickness) solid var(--md-sys-divider-color)}.micl-divider-inset--start{width:calc(100% - var(--md-sys-divider-inset-margin));height:0;margin-block:var(--md-sys-divider-space);margin-inline:var(--md-sys-divider-inset-margin) 0;border:0;border-block-start:var(--md-sys-divider-thickness) solid var(--md-sys-divider-color)}.micl-divider-inset--end{width:calc(100% - var(--md-sys-divider-inset-margin));height:0;margin-block:var(--md-sys-divider-space);margin-inline:0 var(--md-sys-divider-inset-margin);border:0;border-block-start:var(--md-sys-divider-thickness) solid var(--md-sys-divider-color)}.micl-divider-vertical{min-height:100%;width:0;margin-block:0;margin-inline:calc(2*var(--md-sys-divider-space));border:0;border-inline-start:var(--md-sys-divider-thickness) solid var(--md-sys-divider-color)}