CSS3 background-clip Property with example

This is used to specify the painting area of the background, this is more similar to the "background-origin", but the "background-origin" should be used when we use image as the background and the "background-origin" positions the image at the specified location..

Where as the "background-clip" should be used when we use color as the background, and it specifies the painting area.

The possible values for this property are..

border-box : The background is clipped to the border box
padding-box: The background is clipped to the padding box
content-box: The background is clipped to the content box

The background-clip property is supported IE9+, Firefox 4+, Opera, and Chrome.

Safari supports an alternative, the -webkit-background-clip property.

Example for background-clip property..

/*for border-box*/
#div1
{
padding:25px;
border:5px dotted #000000;
background-color:green;
background-clip:border-box;
}

/*for padding-box*/
#div1
{
padding:25px;
border:5px dotted #000000;
background-color:green;
background-clip:padding-box;
}


/*for content-box*/
#div1
{
padding:25px;
border:5px dotted #000000;
background-color:green;
background-clip:content-box;
}

CSS3 Other Background Properties..