CSS background-clip Property

Description

The background-clip CSS property determines how the background of an element is clipped or contained within its borders or padding box. It has three possible values: border-box, padding-box, and content-box. When set to border-box, the background extends to the outer edge of the element's border. With padding-box, the background is contained within the element's padding box. Lastly, content-box confines the background within the content box. This property is often used for creative design effects, allowing designers to control how background images or colors are displayed within specific areas of an element, making it a valuable tool for crafting visually appealing web layouts.

Initial value: border-box
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.backgroundClip

Interactive Demo

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;
-webkit-background-clip: text;
color: transparent;

This is the content of the element.

Syntax

background-clip: <box> [ , <box> ]*

Values

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

border-boxThe background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-boxNo background is drawn below the border (background extends to the outside edge of the padding).
content-boxThe background is painted within (clipped to) the content box.

Example

HTML

<div class="test">border-box</div> 

<div class="test2">padding-box</div> 

<div class="test3">content-box</div>

CSS

div {
   width: 10em; 
   height: 10em;
   background-color: Plum;
   border: 5px dashed black; 
   display: inline-block;
   margin-right: 15px; 
   padding: 15px; 
}
.test {
   background-clip: border-box;  
} 
.test2 { 
   background-clip: padding-box;  
}
.test3 { 
   background-clip: content-box;  
}

Result

Editor