It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Background-Clip Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 1, 2019

Explaining the background clip

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

Example
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.

Background Clip

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

Property Description
border-box Makes CSS background clip to the border box (the default value)
padding-box Makes CSS background clip to the padding box
content-box Makes CSS background clip to the content box
text Makes CSS background clip to the text only (an experimental value)

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
4+
Browser image
IE
9+
Browser image
Opera
10.5+
Browser image
Safari
3+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
14+
Browser image
Opera
11+
Browser image
Safari
1+