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
}