Revision 1069658 of background-clip

<div>{{CSSRef}}</div>

<h2 id="Summary">Summary</h2>

<p>The <strong><code>background-clip</code></strong> CSS property specifies whether an element's background, either the color or image, extends underneath its border.</p>

<p>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 {{cssxref("border-style")}} or {{cssxref("border-image")}}); otherwise the border covers up the difference.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">
/* 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;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>border-box</code></dt>
 <dd>The background extends to the outside edge of the border (but underneath the border in z-ordering).</dd>
 <dt><code>padding-box</code></dt>
 <dd>No background is drawn below the border (background extends to the outside edge of the padding).</dd>
 <dt><code>content-box</code></dt>
 <dd>The background is painted within (clipped to) the content box.</dd>
 <dt><code>text </code>{{non-standard_inline}}</dt>
 <dd>The background is painted within (clipped to) the foreground text; this is currently only supported with a <code>-webkit-</code> prefixed <code>background-clip</code> property.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<div class="note">
<p><strong>Note</strong>: You can find an example of <a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a> usage in our <a href="/en-US/docs/Learn">Learning Area</a>.</p>
</div>

<h4 id="HTML_content">HTML content</h4>

<pre class="brush: html">
&lt;p class="border-box"&gt;The yellow background extends behind the border.&lt;/p&gt;
&lt;p class="padding-box"&gt;The yellow background extends to the inside edge of the border.&lt;/p&gt;
&lt;p class="content-box"&gt;The yellow background extends only to the edge of the content box.&lt;/p&gt;
</pre>

<h4 id="CSS_content">CSS content</h4>

<pre class="brush: css">
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; }
</pre>

<h4 id="Output">Output</h4>

<p>{{EmbedLiveSample('Examples', 540, 450)}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("2.0")}}<sup>[3]</sup></td>
   <td>9.0<sup>[5]</sup></td>
   <td>10.5</td>
   <td>3.0 (522)<sup>[1]</sup></td>
  </tr>
  <tr>
   <td><code>content-box</code></td>
   <td>1.0<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("2.0")}}<sup>[3]</sup></td>
   <td>9.0<sup>[5]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3.0 (522)<sup>[1]</sup></td>
  </tr>
  <tr>
   <td><code>text</code>{{non-standard_inline}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<sup>[2]</sup></td>
   <td>{{CompatGeckoDesktop("49.0")}}<sup>[4]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<sup>[2]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4.1</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>7.1</td>
   <td>12.1</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>content-box</code></td>
   <td>4.1</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>7.1</td>
   <td>12.1</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>text</code>{{non-standard_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("40.0")}}<sup>[4]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: <code>padding</code>, <code>border</code>, and <code>content</code>.</p>

<p>[2] Against a related <a href="https://webkit.org/blog/164/background-clip-text/">blog post</a>, WebKit does <strong>not</strong> include text decorations or shadows in the clipping.</p>

<p>[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: <code>-moz-background-clip: padding | border</code>.</p>

<p>[4] Gecko supports the {{property_prefix("-webkit")}} prefixed version of the property for compatibility with other browsers and to support the <code>text</code> value but maps it to the unprefixed version of <code>background-clip</code>. It is behind the <code>layout.css.background-clip-text.enabled</code> pref, not activated by default, in Firefox 48. Against a related <a href="https://webkit.org/blog/164/background-clip-text/">blog post</a>, Gecko does <strong>not</strong> include text decorations or shadows in the clipping.</p>

<p>[5] Internet Explorer 7 supported, but in other versions of Internet Explorer it behaves like <code>background-clip:padding</code> if <code>overflow: hidden | auto | scroll</code>.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{cssxref("clip")}}</li>
 <li><a href="/en-US/docs/Web/CSS/box_model">CSS Box Model</a></li>
</ul>