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

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

<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

The following table will show you the current browser support for the CSS background-clip property.

Desktop
Edge Chrome Firefox Opera Safari
121410.55
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
181411514

Last updated by CSSPortal on: 1st January 2024