Box Decoration Break

vel-src: layout.css

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

Class	Properties
vel-box-decoration-clone	box-decoration-break: clone
vel-box-decoration-slice	box-decoration-break: slice

Examples

Box decoration break

vel-box-decoration-clone

Each fragment gets
its own decoration

vel-box-decoration-slice

Decoration is sliced
across fragments

example.html

<div class="vel-grid vel-grid-cols-2 vel-gap-4">
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:16px;border-radius:6px">
    <p style="color:#64748b;font-size:11px;margin-bottom:8px">vel-box-decoration-clone</p>
    <span class="vel-box-decoration-clone" style="background:#7c5cfc;color:#fff;padding:4px 10px;border-radius:6px;font-size:13px;line-height:2.2">
      Each fragment gets<br>its own decoration
    </span>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:16px;border-radius:6px">
    <p style="color:#64748b;font-size:11px;margin-bottom:8px">vel-box-decoration-slice</p>
    <span class="vel-box-decoration-slice" style="background:#0ecb81;color:#fff;padding:4px 10px;border-radius:6px;font-size:13px;line-height:2.2">
      Decoration is sliced<br>across fragments
    </span>
  </div>
</div>