Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

-webkit-background-clip Redirect 1

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.

Syntax

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-clip: inherit;

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.

Formal syntax

<box>#

Examples

Using padding-box

HTML content

<p>The yellow background extends to the inside edge of the border.</p>

CSS content

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 2em;
   padding: 2em;

   /* The yellow background extends to the inside edge of the border. */ 
   background: #F8D575;
   background-clip: padding-box;
 }

Output

Using border-box

HTML content

<p>The yellow background extends behind the border.</p>

CSS content

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 2em;
   padding: 2em;

   /* The yellow background WILL go behind the border. */
   background: #F8D575;
   background-clip: border-box;
 }

Output

Using content-box

HTML content

<p>The yellow background extends only to the edge of the content box.</p>

CSS content

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 2em;
   padding: 2em;

   /* The yellow background extends only to the edge of the content box. */
   background: #F8D575;
   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  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 12.0 (maybe earlier) 3.0 (522) [3]
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)
  • [1] 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.
  • [2] Internet Explorer 7 supported, but in other versions of Internet Explorer it behaves like background-clip:padding if overflow: hidden | auto | scroll.
  • [3] 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.
  • [4] Konqueror 3.5.4 supports -khtml-background-clip.

See also

Document Tags and Contributors

 Last updated by: Sheppy,