Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS background-clip Property

The background-clip property in CSS asserts whether the background of an element extends underneath the border-box, content-box or the padding-box.

Since the root element has a different background painting area, so the background-clip property has no effect when it is specified on it.

In case, the computed value of the background image on the root element is none and the background color is transparent, then the user should instead propagate the computed values of the background properties from the first HTML <body> child element of the element.

The used values of that element's <body> background properties are the initial values for them. And if the element is having no background image or background color, then this property will have only a visual effect while the border is having transparent regions.

Syntax for background-clip property:

Following is the syntax for the background-clip property.

<box> where <box> = border-box | padding-box | content-box

CSS background-clip property values:

Let's see what values this property can have and what does those values do:

Value

Description

border-box

In this case, the background extends to the outside corner of the border but underneath the border in the z-ordering.

padding-box

In this case, the background extends to the outside corner of the padding and there is no background drawn beneath the border.

content-box

In this case, the background gets painted in the content box.

text

In this case, the background gets painted in the foreground text.

Example 1: CSS background-clip Property

In the example below, we are using the background-clip property with different background colors, borders, and different values.

In this case, we have given the background-clip of the object as border-box, padding-box, content-box, and text.

The CSS is embedded inside the html code within the starting and closing <style> tags.

<!DOCTYPE html>
<html>
<head>
	<title>Background-clip</title>
	<style type="text/CSS">
		p {
		  border: .8em darkviolet;
		  border-style: dotted double;
		  margin: 1em 0;
		  padding: 1.4em;
		  background: linear-gradient(60deg, red, yellow, red, yellow, red);
		  font: 900 1.2em sans-serif;
		  text-decoration: underline;
		}		
		.border-box { background-clip: border-box; }
		.padding-box { background-clip: padding-box; }
		.content-box { background-clip: content-box; }		
		.text {
		  background-clip: text;
		  -webkit-background-clip: text;
		  color: rgba(0,0,0,.2);
		}
	</style>
</head>
<body>
	<p class="border-box">The background extends behind the border.</p>
	<p class="padding-box">The background extends to the inside edge of the border.</p>
	<p class="content-box">The background extends only to the edge of the content box.</p>
	<p class="text">The background is clipped to the foreground text.</p>
</body>
</html>

Output:

CSS background-clip property example

Example 2: CSS background-clip Property

In the example below, we are using the background-clip property with different background colors, borders, and different values. We have given the background-clip of the object as a border-box.

<!DOCTYPE html>
<html>
<head>
	<title>Background-clip</title>
	<style type="text/CSS">
		p {
		  border: .8em darkviolet;
		  border-style: dotted double;
		  margin: 1em 0;
		  padding: 1.8em;
		  background: linear-gradient(60deg, black, red, black, red, black);
		  font: 900 1.2em sans-serif;
		  text-decoration: underline;
		}
		
		.border-box { background-clip: border-box; 
		}
	</style>
</head>
<body>
	<p class="border-box">The background extends behind the border.</p>
</body>
</html>

Output:

CSS background-clip property example

Example 3: CSS background-clip Property

In the example below, we are using the background-clip property with different background colors, borders, and different values. We have given the background-clip of the object as a padding-box.

<!DOCTYPE html>
<html>
<head>
	<title>Background-clip</title>
	<style type="text/CSS">
		p {
		  border: .8em darkviolet;
		  border-style: dotted double;
		  margin: 1em 0;
		  padding: 1.8em;
		  background: linear-gradient(60deg, black, red, black, red, black);
		  font: 900 1.2em sans-serif;
		  text-decoration: underline;
		}
		
		.padding-box { 
            background-clip: padding-box; 
		}
	</style>
</head>
<body>
	<p class="border-box">The background extends to the inside edge of the border.</p>
</body>
</html>

Output:

CSS background-clip property example

Live Example:

Here in this live example, you can test the code and execute the example using different values or even edit the code example.

Browser Compatibility

There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 1 1
Edge 12 12
Firefox 4 4
Internet Explorer 9 9
Opera 10.5 10.5
Safari 3 3
Webview Android 4.1 4.1
Chrome Android 18 18
Firefox Android 14 14
Opera Android 11 11
IOS Safari 1 1
Samsung Internet 1.0 1.0

Conclusion

The default value for the background-clip property is border-box. It is applicable to all elements. It is also applicable to ::first-letter and ::first-line. It is not an inherited property. The computed value for this property is the specified one. And the animation type for this property is discrete.