Syntax

Box Decoration Break

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

Overview

ClassDeclarations
box-decoration-break:type-webkit-box-decoration-break: type; box-decoration-break: type;
box-decoration:slice-webkit-box-decoration-break: slice; box-decoration-break: slice;
box-decoration:clone-webkit-box-decoration-break: clone; box-decoration-break: clone;
Box Decoration Break
<span class="box-decoration:slice rbr:2x rtl:2x">Box Decoration Break</span>

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.

Box Decoration Break
<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.

Box Decoration Break
<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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.