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="bg:blue-60/.12 box-decoration-break:slice">  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="px:3xs bg:blue-60/.12 box-decoration-break:clone">  Wrapped inline text</span>

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

<span class="bg:blue-5 box-decoration-break:clone">  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@print box-decoration-break:slice@sm">...</span>

Setting the width of an element’s border.

Setting all the outline properties at once.