CSS background-clip Property

CSS background-clip property specifies whether an element background (color or image) extends underneath its border or not.

Usages

The following table outline the usages and version history of this property.

Default value: border-box
Applies to: All elements
Inherited: No
Version: CSS3
JavaScript Syntax: object.style.backgroundClip = "padding-box"

Syntax

Here is a syntax for the CSS background-clip property

background-position: border-box | padding-box | content-box | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
border-box Default. Specifies that background (color or image) positioned top left corner of the border edge
padding-box Specifies that background (color or image) positioned top left corner of the padding edge
content-box Specifies that background (color or image) positioned top left corner of the content edge
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets background clip border-box, padding-box, content-box values.

.border {
  background-clip: border-box;
}
.padding {
  background-clip: padding-box;
}
.content {
  background-clip: content-box;
}

Run it...   »

Browser Compatibility

  • Google Chrome 4+
  • Mozilla Firefox 4+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 3+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.