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;">A 100px tall div with 10px padding. 'background-clip: border-box' paints the background up to the outer border edge. Background color is '#ff0', border is 'dashed 10px #00f'.</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: content-box;">A 100px tall div with 10px padding. 'background-clip: content-box' paints the background only within the content area (inside padding). Background color is '#ff0', border is 'dashed 10px #00f'.</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: padding-box;">A 100px tall div with 10px padding. 'background-clip: padding-box' paints the background up to the outer edge of the padding. Background color is '#ff0', border is 'dashed 10px #00f'.</div>

Desktop

Chrome

1+ ○

Firefox

4+ ○

3 △

2 △

1 △

↑ Requires prefix -moz-

Safari

5+ ○

4 △

3 △

↑ Requires prefix -webkit-

2 and below ×

Edge

12+ ○

Supported in all versions.

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

10.5+ ○

9 and below ×

Mobile

iOS Safari

5+ ○

4 △

3 △

2 △

1 △

↑ Requires prefix -webkit-

Android Browser

4.4+ ○

3 and below ×

Chrome Android

Latest ○

Same support as desktop.

Firefox Android

Latest ○

Same support as desktop.

※ Version data is based on MDN / Can I Use.

Specifies the area within which the background is painted.

By default, the background extends to the outer edge of the border. With the background-clip property, you can restrict the background to the content area (excluding padding) or just the padding area. Compare the yellow background extents in the samples above.