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

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

Browser support:
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: 
The background extends into the border of the element.
Takes the value of this property from the computed style of the parent element.
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:
        .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;
    <div class="bgClipBorder">background-clip: border</div>
    <br />
    <div class="bgClipPadding">background-clip: padding</div>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content