Sukarelawan kami masih belum menterjemah artikel ini ke bahasa Melayu. Sertai kami dan bantu melaksanakannya!
Anda juga boleh membaca artikel ini dalam bahasa English (US).

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.

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>#

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 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 valueborder-box
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-clipChrome 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 12Firefox 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
content-boxChrome Full support 1Edge Full support 12Firefox Full support 4IE 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.5Safari Full support 3WebView Android Full support 4.1Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
text
Experimental
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 NoOpera 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
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