box-decoration-break プロパティ

最終更新：2026-09-13

box-decoration-break box-decoration-break プロパティ

box-decoration-break プロパティは、background、border、padding などの要素の装飾が、改行や改ページのような区切り位置でどのようにレンダリングされるかを制御します。デフォルト値の slice は、装飾が切り取られたようにレンダリングされます。clone は、各フラグメントに対して完全な装飾をレンダリングします。これは主に、行内要素が改行や印刷のページ分割にまたがる場合の見た目に影響します。

カテゴリ
初期値	slice
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

box-decoration-break: slice | clone;

⚙️ 値

値	タイプ	説明
`slice \| clone`	キーワード	装飾の区切れ方。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
box-decoration-break	✓ v29	✓ v12	✓ v28	✓ v9	✓ v16
すべての主要ブラウザーでサポート

ヒント： 背景が複数行にまたがる行内要素の場合、box-decoration-break:clone は各行に独自の完全なパディングと角丸を与え、見た目が良くなります。

❓ よくある質問

Qslice と clone の違いは何ですか？

Aデフォルトの slice は、要素をナイフのように区切り位置で切ります。background、border、padding は区切りをまたいで継続し、閉じることはないため、最初と最後のフラグメントは不完全に見えます。clone は各フラグメントを独立して完全な背景、border、padding、角丸でレンダリングするため、すべての行が完全な小さなボックスのように見えます。各行に完全な角丸が必要な折り返しの行内要素には、clone を使用してください。

Qこのプロパティはどのような場合に必要ですか？

A最も典型的なのは、span や a などの行内要素が複数行にわたって折り返される場合です。各行に独自の完全な背景ブロック、角丸、パディングを持たせるには、box-decoration-break:clone を使用します。これはハイライト、タグスタイル、複数行のリンク下線によく使われます。slice は装飾を連続して流したい効果に適しています。もう 1 つのシナリオは印刷のページ分割で、装飾がページ端でどのように切れるかを制御します。

Qbox-decoration-break のブラウザ対応状況はどうなっていますか？

AFirefox はネイティブでサポートしています。Chrome、Edge、Safari などの WebKit 系ブラウザは、歴史的に -webkit-box-decoration-break プレフィックスを必要とします。Chrome は 115 以降でプレフィックスなしの形式をサポートしていますが、Safari は長らくプレフィックスに依存しています。安全のため、両方を記述してください。まず -webkit- 付きのバージョンを書き、次に標準の宣言を書きます。プレフィックス付きを理解するブラウザはそれを使用し、新しいブラウザは標準のプロパティにフォールスルーします。

Qどの装飾スタイルに影響しますか？

Abackground、border、border-radius、padding、box-shadow などのボックス装飾に影響し、それらが改行や改ページでどのようにレンダリングされるかを決定します。なお、分割後のインラインコンテンツの配置には影響せず、テキストの折り返し自体も変更しません。区切り位置での装飾の挙動のみを制御します。したがって、基になるテキストのフローを心配せずに自由に適用できます。