インライン要素が改行されたり、ブロック要素が段組み、改頁する際の、border, border-radius, border-image, background, box-shadow, padding などの表示方法を指定します。Internet Explorer や Edge ではサポートされていません。Chrome や Safari では -webkit- が必要で、インライン要素に対してのみサポートされています。動作確認するには Firefox がおすすめです。

slice

初期値。最初にボーダー、背景、影、パディングなどをつけた後に、改行・改段・改頁します。

clone

最初に改行・階段・改頁した後に、個々のボックスにボーダー、背景、影、パディングなどをつけます。

.clone {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.multicol {
  columns: 2;
  width: 20rem;
  margin-bottom: .5rem;
}
.example-inline {
  padding: .5rem;
  border: 1px solid #cce;
  border-radius: 1rem;
  line-height: 3rem;
  background-color: #eef;
}
.example-block {
  padding: .5rem;
  border: 1px solid #cce;
  border-radius: 1rem;
  background-color: #eef;
}

<h5>[inline] box-decoration-break: slice</h5>
<div>
  <span class="example-inline">HAPPY<br>NEW<br>YEAR!!</span>
</div>

<h5>[inline] box-decoration-break: clone</h5>
<div>
  <span class="example-inline clone">HAPPY<br>NEW<br>YEAR!!</span>
</div>

<h5>[block] box-decoration-break: slice</h5>
<div class="multicol">
  <div class="example-block">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん</div>
</div>

<h5>[block] box-decoration-break: clone</h5>
<div class="multicol">
  <div class="example-block clone">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん</div>
</div>

• https://drafts.csswg.org/css-break-3/#break-decoration
• https://developer.mozilla.org/ja/docs/Web/CSS/box-decoration-break
• https://caniuse.com/#search=box-decoration-break