background-clip

Summary

Specifies how an element’s background is clipped.

Overview table

Initial value: border-box
Applies to: All elements
Inherited: No
Media: visual
Computed value: as specified
Animatable: No
CSS Object Model Property: backgroundClip
Percentages: N/A

Syntax

background-clip: border-box
background-clip: content-box
background-clip: padding-box

Values

border-box: Default. The background extends underneath the element’s borders, which can be seen with semi-transparent or dotted or dashed border-styles.
padding-box: The background is clipped to the padding-box, i.e. it cannot be seen under the element’s borders.
content-box: The background is clipped the element’s content box, so the paddings and borders have no background. This is mainly useful with multiple backgrounds with different background-clip values.

Examples

The background will not extend underneath the semi-transparent black border, so the element’s borders will allow whatever is underneath the element to show through.

div
{
   border: 5px solid rgba(0,0,0,.5);
   background: deeppink;
   background-clip: padding-box;
}

Related specifications

CSS Backgrounds and Borders Module Level 3: W3C Candidate Recommendation