In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > browser specific extensions > -moz-background-clip

-moz-background-clip property | -webkit-background-clip property

Browser support:

-moz-background-clip:

-webkit-background-clip:

Sets which part of background is visible.

This property is useful if you don't want to create a border-style that is part of the background. Use it with a transparent border-style (dotted, dashed, etc.).

JavaScript page for this property: MozBackgroundClip | webkitBackgroundClip. You can find other example(s) there.

Possible values:

One of the following values:

border

The background extends into the border of the element.

inherit

Takes the value of this property from the computed style of the parent element.

padding

The background does not extend into the border.

Default: border.

Example HTML code 1:

This example illustrates the use of the -moz-background-clip and the -webkit-background-clip properties:

<head>
    <style>
        .bgClipBorder {
            height: 50px;
            width: 200px;
            border: 10px dotted red;
            background: green;
            padding-top: 20px;

            -moz-background-clip: border;
            -webkit-background-clip: border;
        }

        .bgClipPadding {
            width: 200px;
            height: 50px;
            border: 10px dotted red;
            background: green;
            padding-top: 20px;

            -moz-background-clip: padding;
            -webkit-background-clip: padding;
        }
    </style>
</head>
<body>
    <div class="bgClipBorder">background-clip: border</div>
    <br />
    <div class="bgClipPadding">background-clip: padding</div>
</body>