CSS background-clip

The background-clip property in CSS specifies whether an element's background extends underneath its border or padding. By default, the background covers the entire content box, but you can use background-clip to control the visibility of the background in different areas of the element.

There are three possible values for the background-clip property:

border-box: The background is painted within (clipped to) the border box.
padding-box: The background is painted within (clipped to) the padding box.
content-box: The background is painted within (clipped to) the content box.

Let's see some examples to understand how the background-clip property works:


    .box {
      width: 200px;
      height: 200px;
      border: 10px solid black;
      padding: 20px;
      background-color: lightblue;
      background-clip: content-box;
    }

Result:

This is an example of background-clip: content-box


    .box {
      width: 200px;
      height: 200px;
      border: 10px solid black;
      padding: 20px;
      background-color: lightblue;
      background-clip: padding-box;
    }

Result:

This is an example of background-clip: padding-box


    .box {
      width: 200px;
      height: 200px;
      border: 10px solid black;
      padding: 20px;
      background-color: lightblue;
      background-clip: border-box;
    }

Result:

This is an example of background-clip: border-box

Play around with different values of background-clip to see how it affects the background of an element. This property can be useful for creating interesting visual effects on your website.