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

• 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

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

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

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

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;  
}

Browser Support

Desktop
9	12	1	4	10.5	14
Tablets / Mobile
4	18	14	11	14	1.0

Last updated by CSSPortal on: 20th October 2019