CSS background-clip Property

Description

The background-clip property determines the background painting area, which determines the area within which the background is painted.

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

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