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:typebox-decoration-break: type; -webkit-box-decoration-break: type;
box-decoration:slicebox-decoration-break: slice; -webkit-box-decoration-break: slice;
box-decoration:clonebox-decoration-break: clone; -webkit-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 conditional queries.

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

Setting the width of an element’s border.

Syntax
Box Shadow

Adding shadow effects around an element.

© Aoyue Design LLC.