This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Related articles

Background