Box Decoration Break box-decoration-*

Control how box decorations (background, border, padding) behave when an element breaks across multiple lines, columns, or pages.

Quick Reference

box-decoration-clone

Each fragment is decorated independently

box-decoration-slice

Decoration is sliced across fragments

Interactive Examples

Box Decoration Clone

This text spans multiple lines and each line fragment gets its own complete background, padding, and border decorations. Notice how each line has rounded corners and full gradient.
<span class="box-decoration-clone bg-gradient-to-r from-blue-500 to-purple-500">
  Text spanning multiple lines
</span>

Box Decoration Slice (Default)

This text also spans multiple lines but the background and decorations are sliced, creating a continuous appearance across line breaks without duplicating borders or padding.
<span class="box-decoration-slice bg-gradient-to-r from-green-500 to-teal-500">
  Text spanning multiple lines
</span>

Border Behavior

Clone (Each fragment bordered)

This text has borders on each line fragment, creating individual bordered segments.

Slice (Continuous border)

This text has a sliced border that appears continuous across line breaks.

Padding Behavior

Clone (Padding on each fragment)

Notice the padding applied to each line fragment independently.

Slice (Continuous padding)

Here the padding creates a continuous effect across line breaks.

Side-by-Side Comparison

box-decoration-clone

Each line fragment is treated as a separate box with complete decorations. Borders, backgrounds, and padding are applied to each fragment independently, creating distinct visual segments.

✓ Each fragment has complete decorations

✓ Rounded corners on all fragments

✓ Full padding on each line

box-decoration-slice

The decoration is sliced across fragments, creating a continuous appearance. The background flows naturally across line breaks without repeating borders or padding at each fragment.

✓ Continuous decoration flow

✓ No duplicate borders

✓ Natural line breaking

Common Use Cases

🏷️ Inline Tags

Create distinct tag-like elements that break across lines.

<span class="box-decoration-clone">

🎨 Highlighted Text

Apply highlighting that flows naturally across line breaks.

<mark class="box-decoration-slice">

📝 Code Spans

Style inline code that may wrap across multiple lines.

<code class="box-decoration-clone">

🔗 Link Styling

Create distinctive link appearances that handle line breaks well.

<a class="box-decoration-slice">

💬 Quote Styling

Style inline quotes with proper decoration handling.

<q class="box-decoration-clone">

⚠️ Inline Alerts

Create inline warning or info text with proper styling.

<span class="box-decoration-clone">

Best Practices

✅ Do

  • • Use box-decoration-clone for distinct segments
  • • Use box-decoration-slice for continuous highlighting
  • • Test with varying text lengths and screen sizes
  • • Consider readability across line breaks
  • • Apply to inline elements that may wrap
  • • Use for tag-like styling that needs consistency

❌ Don't

  • • Apply to block-level elements unnecessarily
  • • Use complex gradients with slice if not needed
  • • Ignore the visual impact on readability
  • • Forget to test with different content lengths
  • • Use when default behavior is sufficient
  • • Apply without considering performance impact

Browser Support & Performance

🌐 Browser Support

Chrome✓ 22+
Firefox✓ 32+
Safari✓ 7+
Edge✓ 79+
IE✗ Not Supported

⚡ Performance Notes

  • • Minimal performance impact on modern browsers
  • • Clone mode may use slightly more memory
  • • Works efficiently with CSS transforms
  • • No JavaScript required
  • • Optimized for text rendering
  • • Compatible with responsive designs

Related Layout Classes

break-inside-*

Control breaks within elements

box-border

Box sizing utilities

box-decoration-*

Current page