Box Decoration Break

Controls how element decorations (like background, border, shadow, etc.) behave when the element breaks across multiple lines or columns. This is particularly useful for styling inline elements that may wrap, such as highlighted text or links. In Tailwind v4, this utility helps ensure consistent styling across fragmented content.

Layout1 variant3 examples

Official Docs Open Playground

Basic usage:

<span class="box-decoration-slice bg-gradient-to-r from-blue-400 to-purple-500 text-white px-2">
  This text might wrap across multiple lines with the gradient sliced at each line break.
</span>

Examples

Default 'slice' behavior that cuts off decorations at line breaks

<span class="box-decoration-slice bg-gradient-to-r from-blue-400 to-purple-500 text-white px-2">
  This text might wrap across multiple lines with the gradient sliced at each line break.
</span>

Edit in playground

Clone behavior that repeats decorations on each line segment

<span class="box-decoration-clone bg-gradient-to-r from-blue-400 to-purple-500 text-white px-2">
  This text will have the complete gradient applied to each line when it wraps, making each line look like a complete element.
</span>

Edit in playground

Practical example with highlighted text that maintains consistent styling when wrapping

<!-- Real-world example: Highlighted text that spans multiple lines -->
<p class="text-lg leading-relaxed">
  Regular text with 
  <mark class="box-decoration-clone bg-yellow-200 px-1">
    some highlighted content that might wrap across multiple lines while maintaining consistent highlighting
  </mark>
  and then continue with regular text.
</p>

Edit in playground

Live Preview

Try the Box Decoration Break utility with different values

Open Interactive Playground

Variants

slice: breaks decorations at line breaks (default), clone: duplicates decorations on each line segment to make each piece look like a complete element

sliceclone