background-clip

div.test { background-clip: border-box;}
div.test1 { background-clip: content-box;}
div.test2 { background-clip: padding-box;}

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: border-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景はボーダーの外側まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: content-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景は要素の内容が表示される余白を含まない領域まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: padding-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景はパディングの外側の端まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

デスクトップ

Chrome

1 以降 ○

Firefox

4 以降 ○

3 △

2 △

1 △

↑ prefix『-moz-』が必要

Safari

5 以降 ○

4 △

3 △

↑ prefix『-webkit-』が必要

2 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

10.5 以降 ○

9 以前 ×

モバイル

iOS Safari

5 以降 ○

4 △

3 △

2 △

1 △

↑ prefix『-webkit-』が必要

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

背景の適用範囲を指定することができます。

通常、背景はその要素のボーダーの外側まで描写されますが、『background-clip』プロパティを使用することによってコンテントボックス(要素の内容が表示される余白を含まない領域)や、パディングボックス(パディングの外側の端まで)のみに背景を表示させることができるようになります。上記のサンプルの黄色い背景が表示されている範囲をご確認下さい。