CSS - background-clip Property

Quiz

CSS background-clip property is used to specify how the background image or color should be displayed within an element's padding box, border box or content box. It determines the area of an element to which the background will be applied.

Syntax

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

Property Values

Value	Description
border-box	The background extends behind the border. Default value.
padding-box	The background extends to the inside edge of the border.
content-box	The background extends to the edge of the content box.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Clip Property

Below described examples explain background-clip property with different values.

Background Extension behind Border

To enable the background to extend behind the border, we use the border-box value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
        }

        .border-area {
            background-clip: border-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="border-area">Background applied to the entire element.</p>

</body>

</html>

Background Extension Inside Border

To enable the background to extend within the border, we use the padding-box value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
        }

        .padding-area {
            background-clip: padding-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="padding-area">
        Background applied to the content & padding area.
    </p>
</body>

</html>

Background Extension Inside Content Box

To enable the background to extend to the edge of the content box, we use the the content-box value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
        }

        .content-area {
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="content-area">
        Background applied only to the content area.
    </p>

</body>

</html>

Supported Browsers

Property
background-clip	4.0	9.0	4.0	3.0	10.5

css_reference.htm

Print Page