CSS background-clip Property

Specify how far the background should extend within an element:

div {
border: 10px dotted black;
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. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.backgroundClip="content-box" Try it

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

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

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