CSS background-clip Property

The background-clip CSS attribute specifies how to expand the background (color or image).

Syntax

background-clip: border-box | padding-box | content-box | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .border-box {
        border: 5px dashed #212b36;
        padding: 10px;
        background: lightgreen;
        background-clip: border-box;
    }

    .padding-box {
        border: 5px dashed #212b36;
        padding: 10px;
        background: lightpink;
        background-clip: padding-box;
    }

    .content-box {
        border: 5px dashed #212b36;
        padding: 10px;
        background: lightblue;
        background-clip: content-box;
    }
</style>
</head>
<body>

<h2>background-clip: border-box</h2>
<div class="border-box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

<h2>background-clip: padding-box</h2>
<div class="padding-box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

<h2>background-clip: content-box</h2>
<div class="content-box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

</body>
</html>

Preview

Property Values

Value	Description
border-box	The default value. The backdrop continues past the boundary.
padding-box	The backdrop continues all the way to the inside edge of the border.
content-box	The backdrop stretches all the way to the content box's boundary.
initial	Set this property's value to the default.
inherit	This attribute is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
background-clip	4.0	4.0	3.0	9.0	10.5

background-blend-mode

background-color

CSS background-clip Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us