box-decoration-break

Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

Overview

Basic usage

Slice

Use box-decoration:slice to apply the background, border, border-image, box-shadow, clip-page, margin, and padding to the box as if it were one continuous fragment.

<span class="box-decoration:slice rbr:2x rtl:2x">Box Decoration Break</span>

Clone

Use box-decoration:clone to apply the background, border, border-image, box-shadow, clip-page, margin, and padding to each fragment independently.

<span class="box-decoration:clone">Box Decoration Break</span>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="box-decoration:slice:hover box-decoration:slice@sm box-decoration:slice@dark box-decoration:slice@print">…</div>