background-clip

  • Revision slug: CSS/background-clip
  • Revision title: background-clip
  • Revision id: 311015
  • Created:
  • Creator: m_gol
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

If there is no background image, this property has only visual effect when the border has transparent regions (because of {{ Cssxref("border-style") }}) or partially opaque regions; otherwise the border covers up the difference.

  • {{Xref_cssinitial()}} border-box
  • Applies to all elements
  • {{Xref_cssinherited()}} no
  • Media {{Xref_cssvisual()}}
  • {{Xref_csscomputed()}} as specified

Syntax

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

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.

Examples

 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* The yellow background will not go behind the border */
   background-clip: padding-box;
 }

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }} {{ Spec2('CSS3 Backgrounds') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [3] {{ CompatGeckoDesktop("2.0") }} [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] {{ CompatGeckoDesktop("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 {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
content-box {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[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, but not other versions of Internet Explorer,behaves like background-clip:padding if overflow: hidden | auto | scroll.

[3] Webkit also supports the prefixed version of this proprietary, and in that case, in addition to the current keywords, the alternative synonyms: padding, border, and content.

[4] Konqueror 3.5.4 supports -khtml-background-clip.

See also

  • {{ CSS_Reference:Background() }}
  • {{ cssxref("clip") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The<code> background-clip </code>CSS property specifies whether an element's background, either the color or image, extends underneath its border.</p>
<p>If there is no background image, this property has only visual effect when the border has transparent regions (because of {{ Cssxref("border-style") }}) or partially opaque regions; otherwise the border covers up the difference.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial()}}</dfn><code> border-box</code></li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{Xref_cssinherited()}}</dfn> no</li>
  <li><dfn>Media</dfn> {{Xref_cssvisual()}}</li>
  <li><dfn>{{Xref_csscomputed()}}</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    border-box</dt>
  <dd>
    The background extends to the outside edge of the border (but underneath the border in z-ordering).</dd>
  <dt>
    padding-box</dt>
  <dd>
    No background is drawn below the border (background extends to the outside edge of the padding).</dd>
  <dt>
    content-box</dt>
  <dd>
    The background is painted within (clipped to) the content box.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre style="overflow:visible; border:5px navy; border-style:dotted double; background: #F8D575; -moz-background-clip:padding; -webkit-background-clip:padding; background-clip:padding-box;">
 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* The yellow background will not go behind the border */
&nbsp;  background-clip: padding-box;
&nbsp;}
</pre>
<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>&nbsp;</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 [3]</td>
        <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
        <td>9.0 [2]</td>
        <td>10.5</td>
        <td>3.0 (522) [3]</td>
      </tr>
      <tr>
        <td><code>content-box</code></td>
        <td>1.0 [3]</td>
        <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
        <td>9.0 [2]</td>
        <td>12.0 (maybe earlier)</td>
        <td>3.0 (522) [3]</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>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>content-box</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[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: <code>-moz-background-clip: padding | border</code>.</p>
<p>[2] Internet Explorer 7, but not other versions of Internet Explorer,behaves like<code> background-clip:padding </code>if<code> overflow: hidden | auto | scroll</code>.</p>
<p>[3] Webkit also supports the prefixed version of this proprietary, and in that case, in addition to the current keywords, the alternative synonyms: <code>padding</code>, <code>border</code>, and <code>content</code>.</p>
<p>[4] Konqueror 3.5.4 supports<code> -khtml-background-clip</code>.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Background() }}</li>
  <li>{{ cssxref("clip") }}</li>
</ul>
Revert to this revision