CSS

The CSS box-decoration-break property is used to display an element's borders or backgrounds seamlessly across multiple lines to prevent them from being broken up.

The box-decoration-break property may not be supported by some browsers; we have verified that it works in Firefox and recommend viewing this page in Firefox.

box-decoration-break

box-decoration-breakプロパティは、一部のブラウザでサポートされていない場合があります。Firefoxでの表示は確認できましたので、このページをFirefoxで閲覧することを推奨します。

　box-decoration-breakは、要素のボーダーや背景のようなデコレーションが、行やページをまたいで表示される場合の挙動を指定するためのプロパティです。このプロパティを使うことで、要素のデコレーションが切れたり、続いたりする方法を制御することができます。

　box-decoration-breakプロパティは、以下の 2つの値を取ることができます。

slice

要素のデコレーションが、行やページをまたいで表示される場合に、デコレーションを切断して表示します。

clone

要素のデコレーションが、行やページをまたいで表示される場合に、デコレーションを複製して表示します。

　slice値を使用すると、要素のデコレーションが行やページをまたいで表示される場合に、デコレーションが切断されます。これは、デコレーションが完全に切れることになるため、デコレーションの左右が別々の行やページに表示されることがあります。

<p>
	<span class="smp1">Lorem ipsum dolor sit amet,<br>
		consectetur adipiscing elit.</span>
</p>

.smp1 {
	border: 3px solid #000;
	background: linear-gradient(#fff, #fae);
	box-decoration-break: slice;
}

　clone値を使用すると、要素のデコレーションが行やページをまたいで表示される場合に、デコレーションが複製されます。これにより、デコレーションが完全に表示されることが保証されますが、デコレーションの左右が同じ行やページに表示されるため、デコレーションが多重化される場合があります。

.smp1 {
	border: 3px solid #000;
	background: linear-gradient(#fff, #fae);
	box-decoration-break: clone;
}

　box-decoration-breakプロパティは、デフォルトで slice値が設定されています。つまり、要素のボーダーや背景が行やページをまたいで表示される場合に、デコレーションが切断されます。

　box-decoration-breakプロパティは、要素のデコレーションを制御するために非常に便利なプロパティです。特に、ウェブページが印刷される場合には、このプロパティが重要です。ページが分割される場合に、要素のデコレーションが正しく表示されるようにすることができます。

　ただし、box-decoration-breakプロパティを使用する際には、デコレーションが複製された場合に、デザイン上の問題が発生する可能性があります。例えば、ボーダーが重なり合う場合や、背景が多重化される場合があります。デザインの観点から、どの値を使用するか慎重に検討する必要があります。

　box-decoration-breakプロパティは、要素のボーダーや背景が複数行にまたがって表示される場合に、途切れなく表示するためのプロパティです。ただし、一部のブラウザでサポートされていない場合がありますので、使用する前にブラウザのサポート状況を確認することが重要です。このプロパティは要素のデコレーションに関する問題を解決するために便利ですが、clone値を使用する場合にはデザイン上の問題が発生する可能性があるため、慎重に検討する必要があります。要素のデコレーションを自然に表示するために、このプロパティを使うことができます。

Browser support