border-image

  • Revision slug: CSS/border-image
  • Revision title: border-image
  • Revision id: 310959
  • Created:
  • Creator: mnoorenberghe
  • Is current revision? No
  • Comment add {{ CSS_border_image() }}

Revision Content

{{ CSSRef() }}

Summary

The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases.

The border-image is used instead of the border styles given by the {{ cssxref("border-style") }} properties. It is important to note that if border-style value is none or if the image cannot be displayed, the border styles will be used.

  • {{ Xref_cssinitial() }} border-image is a shorthand property, so it does not technically have an initial value
    but the properties for which it is shorthand have the following initial values:
    • border-image-source: none
    • border-image-slice: 100%
    • border-image-width: 1
    • border-image-outset: 0
    • border-image-repeat: stretch
  • Applies to all elements, except table elements when {{ cssxref("border-collapse") }} is collapse
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} any URI made absolute, any {{ Xref_csslength() }} made absolute, other parts as specified

Syntax

Formal syntax: <'border-image-source'> || 
               <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || 
               <'border-image-repeat'>

Values

See the respective properties for the different values.

Examples

 

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#border-image', 'border-image') }} {{ Spec2('CSS3 Backgrounds') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support

{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }} [1]

Without prefix since {{ CompatGeckoDesktop("15") }}

7.0{{ property_prefix("-webkit") }} {{ CompatNo() }} 10.5 / 11.0{{ property_prefix("-o") }} 3.0{{ property_prefix("-webkit") }} [2]
optional <border-image-slice> {{ CompatGeckoDesktop("15") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fill keyword {{ CompatGeckoDesktop("15") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support

3.2{{ property_prefix("-webkit") }}

Without prefix since {{ CompatGeckoMobile("15") }}

{{ CompatNo() }} 11.0{{ property_prefix("-o") }} 2.1{{ property_prefix("-webkit") }}
optional <border-image-slice> {{ CompatGeckoMobile("15") }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fill keyword {{ CompatGeckoMobile("15") }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes

  • [1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.
  • [2] For Opera, the prefixed property was added after the non-prefixed.

See also

  • {{ CSS_border_image() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>border-image</code> CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases.</p>
<p>The <code>border-image</code> is used instead of the border styles given by the {{ cssxref("border-style") }} properties. It is important to note that if <code>border-style</code> value is <code>none</code> or if the image cannot be displayed, the border styles will be used.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>border-image</code> is a shorthand property, so it does not technically have an initial value<br />
    but the properties for which it is shorthand have the following initial values:
    <ul>
      <li><code>border-image-source: none</code></li>
      <li><code>border-image-slice: 100%</code></li>
      <li><code>border-image-width: 1</code></li>
      <li><code>border-image-outset: 0</code></li>
      <li><code>border-image-repeat: stretch</code></li>
    </ul>
  </li>
  <li><dfn>Applies to</dfn> all elements, except table elements when {{ cssxref("border-collapse") }} is<code> <code class="css">collapse</code></code></li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> any URI made absolute, any {{ Xref_csslength() }} made absolute, other parts as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
Formal syntax: &lt;'border-image-source'&gt; || 
               &lt;'border-image-slice'&gt; [ / &lt;'border-image-width'&gt; | / &lt;'border-image-width'&gt;? / &lt;'border-image-outset'&gt; ]? || 
               &lt;'border-image-repeat'&gt;</pre>
<h3 id="Values">Values</h3>
<p>See the respective properties for the different values.</p>
<h2 id="Examples">Examples</h2>
<p>&nbsp;</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', '#border-image', 'border-image') }}</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>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>
          <p>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }} [1]</p>
          <p>Without prefix since {{ CompatGeckoDesktop("15") }}</p>
        </td>
        <td>7.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>10.5 / 11.0{{ property_prefix("-o") }}</td>
        <td>3.0{{ property_prefix("-webkit") }} [2]</td>
      </tr>
      <tr>
        <td>optional <code>&lt;border-image-slice&gt;</code></td>
        <td>{{ CompatGeckoDesktop("15") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fill</code> keyword</td>
        <td>{{ CompatGeckoDesktop("15") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>iOS Safari</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
        <th>Android Browser</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>
          <p>3.2{{ property_prefix("-webkit") }}</p>
          <p>Without prefix since {{ CompatGeckoMobile("15") }}</p>
        </td>
        <td>{{ CompatNo() }}</td>
        <td>11.0{{ property_prefix("-o") }}</td>
        <td>2.1{{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>optional <code>&lt;border-image-slice&gt;</code></td>
        <td>{{ CompatGeckoMobile("15") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fill</code> keyword</td>
        <td>{{ CompatGeckoMobile("15") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">Notes</h3>
<ul>
  <li>[1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.</li>
  <li>[2] For Opera, the prefixed property was added <em>after</em> the non-prefixed.</li>
</ul>
<h3 id="See_also">See also</h3>
<ul>
  <li>{{ CSS_border_image() }}</li>
</ul>
Revert to this revision