The background-clip
CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
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 syntax
<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 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. |
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 |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-clip | Chrome
Full support
1
| Edge Full support 12 | Firefox
Full support
4
| IE
Full support
9
| 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 |
content-box | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 4 | IE
Full support
9
| 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
| Edge
Full support
15
| Firefox
Full support
49
| IE No support No | Opera
Partial support
15
| Safari
Partial support
4
| WebView Android
Partial support
≤37
| Chrome Android
Partial support
18
| Firefox Android
Full support
49
| Opera Android
Partial support
14
| Safari iOS
Partial support
3.2
| Samsung Internet Android
Partial support
1.0
|
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- 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.
See also
- The
clip-path
property creates a clipping region that defines what part of an entire element should be displayed. - Background properties:
background
,background-color
,background-image
,background-origin
- Introduction to the CSS box model