background-clip property

The background-clip property specifies how a background fill or background image will be placed relative to an element: part of the background will go under a border, the background will not go under the border, or the background will only be placed under a content of an element (that is, padding will move the background).

Syntax

selector {
	background-clip: padding-box | border-box | content-box;
}

Values

Value	Description
`border-box`	A background will go under a border.
`padding-box`	A background will not go under a border.
`content-box`	A background will only be under a content.

Default value: border-box.

Example . The padding-box value, image

In this case, the background will not go under a border:

<div id="elem"></div>

#elem {
	background-clip: padding-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . The border-box value, image

Now the background will go under a border:

<div id="elem"></div>

#elem {
	background-clip: border-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . The content-box value

And now that part of the background that is under padding will be clipped:

<div id="elem"></div>

#elem {
	background-clip: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . The padding-box value, fill

Now the background color will not go under a border:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-clip: padding-box;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . The border-box value, fill

And now the background color will go under a border:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-clip: border-box;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Example . The content-box value, background-color

And now the background fill will be moved with padding:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-clip: content-box;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

background-clip property

Syntax

Values

Example . The padding-box value, image

Example . The border-box value, image

Example . The content-box value

Example . The padding-box value, fill

Example . The border-box value, fill

Example . The content-box value, background-color

See also