CSS Background-Clip Property

The CSS background-clip property specifies where the background image / background color should be shown. There are three possible values:

border-box: the background covers the content area, the padding area, and the border area.
padding-box: the background covers the content area and the padding area.
content-box: the background covers only the content area.

The picture below shows where the background would be displayed for each background-clip value. Specifically, background-clip: border-box means that the background is shown inside the purple box, background-clip: padding-box means that the background is shown inside the blue box, and background-clip: content-box means that the background is shown inside the orange box.

CSS Background-Clip Property Description

Below we show an example for each possible value.

Example 1: Background-clip: border-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-color: red;
background-repeat: no-repeat;
background-clip: border-box;

Result:

In Example 1, the background color fills the entire element, including the border area. The border area is gray and has been set to be opaque so you can see the presence of the background image in the border area.

Example 2: Background-clip: padding-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-color: red;
background-repeat: no-repeat;
background-clip: padding-box;

Result:

In Example 2, the background color fills only the content area and the padding area.

Example 3: Background-clip: content-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-color: red;
background-repeat: no-repeat;
background-clip: content-box;

Result:

In Example 3, the background color fills only the content area and the content area.

Next: CSS Background-Origin

AdBlock Detected!