Borders & Outlines

box-decoration-break

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

Class	Declarations
`box-decoration-break:slice`	`-webkit-box-decoration-break: slice; box-decoration-break: slice;`
`box-decoration-break:clone`	`-webkit-box-decoration-break: clone; box-decoration-break: clone;`
`box-decoration-break:<type>`	`box-decoration-break: <type>;`

Box Decoration Break

Examples

Use box-decoration-break:slice when inline fragments should share one continuous background, border, shadow, and decoration.

<span class="box-decoration-break:slice bg:blue-60/.12">    Wrapped inline text</span>

Generated CSS

@layer utilities {    .box-decoration-break\:slice {        -webkit-box-decoration-break: slice;        box-decoration-break: slice    }}

Use box-decoration-break:clone when each wrapped line should get its own background, border, shadow, and decoration.

<span class="box-decoration-break:clone bg:blue-60/.12 px:1x">    Wrapped inline text</span>

This property is most visible when inline content wraps across multiple lines.

<span class="box-decoration-break:clone bg:blue-5">    A highlighted phrase that can wrap</span>

Apply styles based on different states using selectors and conditional queries.

<span class="box-decoration-break:clone:hover box-decoration-break:slice@sm box-decoration-break:slice@print">...</span>

Setting the width of an element’s border.

Setting all the outline properties at once.