The CSS Background-Clip Property

Explaining the background clip

The CSS background-clip property is used to define the area to which the element's background extends:

div {
    background-clip: content-box;
    border: 5px dotted black;
    padding: 20px;
    background: lightblue;
}

Note: this property is neither inheritable nor animatable.

Syntax for the background-clip

The syntax for the CSS background-clip property is simple:

background-clip: value;

You can define one out of four possible property values which we explain in the next section.

Property values

Each element in CSS has three areas which can also be called boxes:

• the content box holds the actual content of the element (e.g., text or images).
• the padding box holds the content box plus its padding.
• the border box holds the padding box (with the content box inside) plus its border.

The CSS background-clip property values are set according to these boxes as well:

Browser support

Mobile browser support