box-decoration-break

要素がページ、カラム、または行をまたいで分割される際に、ボーダー・パディング・背景・シャドウなどの装飾を各フラグメントに独立して適用するか（clone）、全体として一つに扱うか（slice）を選択できます。インラインレベル要素の改行時のスタイリングや、マルチカラムレイアウトでの表示制御に有効です。

ボックス装飾フラグメント

概要

Chrome 130+

Edge 130+

Safari 未対応

Firefox 32+

Chrome Android 130+

Safari iOS 未対応

Firefox Android 32+

CSS

.tag {
  box-decoration-break: clone;
  background: #4caf50;
  padding: 2px 8px;
  border-radius: 4px;
}

改行されたインライン要素への統一装飾

複数行にまたがるハイライトやタグ要素に、行ごとにパディングとボーダーを独立して適用し、行末・行頭でも美しい表示を維持できます。

Safariでは未サポートです。-webkit-box-decoration-break プレフィックス付き版で一部動作しますが、標準版の対応を確認してください。