Web/CSS/background-clip

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

If the element has no background-image or background-color, 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 masks the difference.

Note: Because the root element has a different background painting area, the background-clip property has no effect when specified on it. See "The backgrounds of special elements."

Note: For documents whose root element is an HTML element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML <body> child element. The used values of that <body> element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the <body> element rather than the HTML element.

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: The background extends to the outside edge of the padding. No background is drawn beneath the border.
content-box: The background is painted within (clipped to) the content box.
text ': The background is painted within (clipped to) the foreground text.

Formal definition

Initial value	`border-box`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

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

Examples

HTML

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

CSS

p {
  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0,0,0,.2);
}

Result

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`background-clip`	Chrome Full support 1 Full support 1 No support 1 — 64 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`.	Edge Full support 12	Firefox Full support 4 Full support 4 Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 1 — 4 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' Used the `-moz-background-clip: padding \| border` syntax.	IE Full support 9 Notes' Full support 9 Notes' Notes' In IE 7 and IE 8 of Internet Explorer, this property always behaved like `background-clip: padding` when `overflow` was `hidden`, `auto`, or `scroll`.	Opera Full support 10.5 Full support 10.5 No support 15 — 51 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Opera accepts alternate synonyms to its values: `padding`, `border`, and `content`.	Safari Full support 3 Prefixed' Notes' Full support 3 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Safari accepts alternate synonyms to its values: `padding`, `border`, and `content`.	WebView Android Full support 4.1 Full support 4.1 No support ≤37 — 64 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' WebView accepts alternate synonyms to its values: `padding`, `border`, and `content`.	Chrome Android Full support 18 Full support 18 No support 18 — 64 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`.	Firefox Android Full support 14 Full support 14 Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Opera Android Full support 11 Full support 11 No support 14 — 47 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Opera accepts alternate synonyms to its values: `padding`, `border`, and `content`.	Safari iOS Full support 1 Prefixed' Notes' Full support 1 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Safari accepts alternate synonyms to its values: `padding`, `border`, and `content`.	Samsung Internet Android Full support 1.0 Full support 1.0 No support 1.0 — 9.0 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`.
`content-box`	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9 Notes' Full support 9 Notes' Notes' In IE 7 and IE 9 of Internet Explorer, it always behaved like `background-clip: padding` if `overflow: hidden \| auto \| scroll`	Opera Full support 10.5	Safari Full support 3	WebView Android Full support 4.1	Chrome Android Full support 18	Firefox Android Full support 14	Opera Android Full support 11	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
`text`	Chrome Partial support 3 Notes' Partial support 3 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.	Edge Full support 15 Full support 15 Partial support 12 Notes' Notes' Before Edge 15, this value was supported with the prefixed version of the property only.	Firefox Full support 49 Full support 49 Full support 48 Disabled' Disabled' From version 48: this feature is behind the `layout.css.background-clip-text.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Partial support 15 Notes' Partial support 15 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.	Safari Partial support 4 Notes' Partial support 4 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.	WebView Android Partial support ≤37 Notes' Partial support ≤37 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.	Chrome Android Partial support 18 Notes' Partial support 18 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.	Firefox Android Full support 49 Full support 49 Full support 48 Disabled' Disabled' From version 48: this feature is behind the `layout.css.background-clip-text.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Partial support 14 Notes' Partial support 14 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.	Safari iOS Partial support 3.2 Notes' Partial support 3.2 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.	Samsung Internet Android Partial support 1.0 Notes' Partial support 1.0 Notes' Notes' This value is supported with the prefixed version of the property only. Notes' According to the WebKit blog, text decorations or shadows are not included in the clipping.

Legend

Full support: Full support
Partial support: Partial support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.