background-clip

The background-clip CSS property specifies the position of painted  background components: image or color.  It determines if the background components are painted across the content, inside the padding or inside the border of the element.

Values of the background-clip property

border-box | padding-box | content-box

The initial value is border-box.

CSS rules for the example ‘div’ element:

    border:50px solid rgba(0, 0 , 0, 0.7);
    padding:20px;
    background-color:#FFB7C5 ;

border-box

The background component (an image or a color) is painted from the edge of the border of the element.

background-clip:border-box;
The background color extends from the edge of the border.

padding-box

The background component (an image or a color) is painted below the border of the element but from the edge of the padding.

background-clip:padding-box;
The background color extends below the border but from the edge of padding.

content-box

The background element (an image or a color) is painted below the border and the padding of the element.

background-clip:content-box;
The background color extends within the content.

Related

Resources

Browser compatibility

background-clip

Internet Explorer
IE9
Firefox
4.0
Chrome
1.0
Safari
3.0
Opera
12
Mobile
Safari Mobile
works
Android
4.1+
Chrome Mobile
works
IE Phone
works
Opera Mini
works
Opera Mobile
works