Background-Clip Property

---

Dr. Foltz

January, 2021

---

The CSS background-clip property defines how far a background should extend within an element.

There are several possible values:

• border-box: This is the default. The background will extend behind the border.
• padding-box: The background extends to the inside edge of the border.
• content-box: The background only extends to the edge of content.
• initial: Resets to default value.
• inherit: Inherit the property from parent element.
• text: Background extends to the edge of text. Note: this is a newer option; the webkit prefix should be used as well.

Examples

HTML

<div class="example1">
    <p>border-box</p>
</div>

<br>

<div class="example2">
    <p>padding-box</p>
</div>

<br>

<div class="example3">
    <p>content-box</p>
</div>

CSS

.example1 {
    border: 1em dashed black;
    padding: 10px;
    background: yellow;
    background-clip: border-box;
    width: 200px;
}

.example2 {
    border: 1em dashed black;
    padding: 10px;
    background: yellow;
    background-clip: padding-box;
    width: 200px;
}

.example3 {
    border: 1em dashed black;
    padding: 10px;
    background: yellow;
    background-clip: content-box;
    width: 200px;
}