CSS background-clip Property

Example

Specify how far the background should extend within an element:

div {
  border: 10px dotted blue;
  padding: 15px;
  background: lightblue;
  background-clip: padding-box;
}

Definition and Usage

The background-clip property defines how far the background (color or image) should extend within an element.

Default value:	border-box
Inherited:	no
Animatable:	no.
Version:	CSS3
JavaScript syntax:	object.style.backgroundClip="content-box"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which background-clip is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-clip	4.0	9.0	4.0	3.0	10.5

CSS Syntax

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

Property Values

Value	Description	Demo
border-box	Default value. The background extends behind the border
padding-box	The background extends to the inside edge of the border
content-box	The background extends to the edge of the content box
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.