Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

This article needs a technical review. How you can help.

Summary

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

If no background image or color is set, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise the border covers up the difference.

Initial valueborder-box
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Values

border-box
The background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-box
No background is drawn below the border (background extends to the outside edge of the padding).
content-box
The background is painted within (clipped to) the content box.
text
The background is painted within (clipped to) the foreground text.

Formal syntax

<box>#

where
<box> = border-box | padding-box | content-box

Examples

Note: You can find an example of -webkit-background-clip: text usage in our Learning Area.

HTML content

<p class="border-box">The yellow background extends behind the border.</p>
<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
<p class="content-box">The yellow background extends only to the edge of the content box.</p>

CSS content

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 1em;
   padding: 2em;
   background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

Output

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-clip' in that specification.
Candidate Recommendation Initial definition
CSS Backgrounds and Borders Module Level 4
The definition of 'background-clip' in that specification.
Editor's Draft Add text value

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] 4.0 (2.0)[3] 9.0[5] 10.5 3.0 (522)[1]
content-box 1.0[1] 4.0 (2.0)[3] 9.0[5] (Yes) 3.0 (522)[1]
text (Yes)-webkit[2] 49.0 (49.0)[4] No support (Yes)-webkit[2] (Yes)-webkit[2]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.1 14.0 (14) 7.1 12.1 (Yes)
content-box 4.1 14.0 (14) 7.1 12.1 (Yes)
text ? 40.0 (40.0)[4] No support ? ?

[1] Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

[2] Against a related blog post, WebKit does not include text decorations or shadows in the clipping.

[3] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

[4] Gecko supports the -webkit prefixed version of the property for compatibility with other browsers and to support the text value but maps it to the unprefixed version of background-clip. It is behind the layout.css.background-clip-text.enabled pref, not activated by default, in Firefox 48. Against a related blog post, Gecko does not include text decorations or shadows in the clipping.

[5] Internet Explorer 7 supported, but in other versions of Internet Explorer it behaves like background-clip:padding if overflow: hidden | auto | scroll.

See also