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>

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

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