改行されたinline要素のすべての行にスタイルを適用する

inline要素（インラインボックス）を改行すると、以下のようにborderが途中で切れたり、paddingを使うと前の行と要素が重なってしまったり、いろいろな問題があった。

box-decoration-breakプロパティは、改行されたinline要素のすべての行にスタイルを適用でき、これらの問題を解決することができる。

<span class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>

.paragraph {
  /* inline-block要素のようなブロック要素では再現しない */
  display: inline;

  /*
   * すべての行に同じスタイルを適用する
   * 一部ブラウザでは -webkit- のベンダープレフィックスが必要
   */
  box-decoration-break: clone;
  box-decoration-break: slice;
}

box-decoration-breakは以下のプロパティに影響する。

• background
• border
• border-image
• box-shadow
• clip-path
• margin
• padding

デモ

ブラウザ対応状況