background-clip

style.css

/* Paint background up to the border box (default) */
div.test { background-clip: border-box;}

/* Paint background only within the content box (no background in padding) */
div.test1 { background-clip: content-box;}

/* Paint background up to the padding box (no background in border) */
div.test2 { background-clip: padding-box;}

/* Practical example with a transparent border (difference is visible) */
.clip-demo {
	background-color: #0077cc;
	border: 10px solid transparent;
	background-clip: padding-box;
}

/* Apply a gradient to text using background-clip: text */
.gradient-text {
	background-image: linear-gradient(to right, #ff6600, #0077cc);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

<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+ ○

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.