CSS3 background-clip Property


Example

Specify the painting area of the background:

div {
    background-color: yellow;
    background-clip: content-box;
}

Try it yourself »

Definition and Usage

The background-clip property specifies the painting area of the background.

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


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 Play it
border-box Default value. The background is clipped to the border box Play it »
padding-box The background is clipped to the padding box Play it »
content-box The background is clipped to the content box Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS3 tutorial: CSS3 Backgrounds

HTML DOM reference: backgroundClip property



Color Picker

colorpicker