The background-clip property sets what area an element’s background color extends to.

  • border-box: Extends to the outside edge of the border, but underneath the border in z-ordering.
  • padding-box: Extends to the outside edge of the padding and no background is drawn beneath the border.
  • content-box: Painted within the content box only.

Code

<h4>Border Box (default)</h4>
<div class="my-box border-box"></div>

<h4>Padding Box</h4>
<div class="my-box padding-box"></div>

<h4>Content Box</h4>
<div class="my-box content-box"></div>
.my-box {
  height: 100px;
  width: 100px;
  border: 10px dashed black;
  background-color: pink;
  padding: 20px;
  margin-bottom: 20px;
}

.border-box {
  background-clip: border-box;
}

.padding-box {
  background-clip: padding-box;
}

.content-box {
  background-clip: content-box
}

Results

Border Box (default)

Padding Box

Content Box