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 value | border-box |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the 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>#
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.