mozilla

Revision 296163 of border-image-slice

  • Revision slug: CSS/border-image-slice
  • Revision title: border-image-slice
  • Revision id: 296163
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The border-image-slice CSS property divides the image specified by {{ cssxref("border-image-source") }} in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.

Four values control the position of the slice lines. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The keyword can be set at any position in the property (before, after or between the other values).

The {{ cssxref("border-image-repeat") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }} properties define how these images will be used.

The shorthand CSS property {{ cssxref("border-image") }} may reset this property to its default value.

  • {{ Xref_cssinitial() }}: 100%
  • Applies to: all elements, except internal table elements when {{ cssxref("border-collapse") }} is set to collapse.
  • {{ Xref_cssinherited() }}: no
  • Percentage: refer to size of the border image
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified
  • Animatable: no

Syntax

Formal grammar: [<number> | <percentage>]{1,4} && fill?  
border-image-slice: slice                  /* One-value syntax   */  E.g. border-image-slice: 30%; 
border-image-slice: horizontal vertical    /* Two-value syntax   */  E.g. border-image-slice: 10% 30%; 
border-image-slice: top vertical bottom    /* Three-value syntax */  E.g. border-image-slice: 30px 30% 45px; 
border-image-slice: top right bottom left  /* Four-value syntax  */  E.g. border-image-slice: 7px 12px 14px 5px; 

border-image-slice: … fill /* The fill value can be place anywhere */ E.g. border-image-slice: 10% fill 7em 12px;

border-image-slice: inherit

Values

stretch
Is a keyword indicating that the image must be stretched to fit the gap between the two borders.
repeat
Is a keyword indicating that the image must be repeated until it fit the gap between the two borders
round
Is a keyword indicating that the image must be repeated until it fit the gap between the two borders. If it doesn't fit after having being repeated an integer number of times, it is rescaled to do so.
space
Is a keyword indicating that the image must be repeated until it fit the gap between the two borders. If it doesn't fit after having being repeated a whole number of times, the white space is distributed arount the tiles.

Specifications

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("15.0") }} 15.0 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
space {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
space {{ CompatNo() }}  {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

See also

  • {{ CSS_border_image() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>border-image-slice</code> CSS property divides the image specified by {{ cssxref("border-image-source") }} in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.</p>
<p><img alt="" src="/files/3814/border-image-slice.png" style="width: 450px; height: 238px; float: left; margin: 1px; padding: 1em;" />Four values control the position of the slice lines. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p>
<p>The middle is not used by the border itself but is used as a background-image if the keyword <code>fill</code> is set. The keyword can be set at any position in the property (before, after or between the other values).</p>
<p>The {{ cssxref("border-image-repeat") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }} properties define how these images will be used.</p>
<p>The shorthand CSS property {{ cssxref("border-image") }} may reset this property to its default value.</p>
<ul class="cssprop cleared">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>100%</code></li>
  <li><dfn>Applies to:</dfn> all elements, except internal table elements when {{ cssxref("border-collapse") }} is set to <code>collapse</code>.</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Percentage:</dfn> refer to size of the border image</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
  <li><dfn>Animatable:</dfn> no</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal grammar: [<var>&lt;number&gt;</var>&nbsp;|&nbsp;<var>&lt;percentage&gt;</var>]{1,4} &amp;&amp; fill?  </pre>
<pre>
border-image-slice: <em>slice</em> <em>                 /* One-value syntax   */</em>  E.g. border-image-slice: 30%; 
border-image-slice: <em>horizontal</em> <em>vertical</em> <em>   /* Two-value syntax   */ </em> E.g. border-image-slice: 10% 30%; 
border-image-slice: <em>top</em> <em>vertical</em> <em>bottom </em><em>   /* Three-value syntax */ </em> E.g. border-image-slice: 30px 30% 45px; 
border-image-slice: <em>top</em> <em>right</em> <em>bottom</em> <em>left </em><em> /* Four-value syntax  */ </em> E.g. border-image-slice: 7px 12px 14px 5px; 

border-image-slice: … fill /* The fill value can be place anywhere */ E.g. border-image-slice: 10% fill 7em 12px;

border-image-slice: inherit
</pre>
<h3>Values</h3>
<dl>
  <dt>
    <code>stretch</code></dt>
  <dd>
    Is a keyword indicating that the image must be stretched to fit the gap between the two borders.</dd>
  <dt>
    <code>repeat</code></dt>
  <dd>
    Is a keyword indicating that the image must be repeated until it fit the gap between the two borders</dd>
  <dt>
    <code>round</code></dt>
  <dd>
    Is a keyword indicating that the image must be repeated until it fit the gap between the two borders. If it doesn't fit after having being repeated an integer number of times, it is rescaled to do so.</dd>
  <dt>
    <code>space</code></dt>
  <dd>
    Is a keyword indicating that the image must be repeated until it fit the gap between the two borders. If it doesn't fit after having being repeated a whole number of times, the white space is distributed arount the tiles.</dd>
</dl>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <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-slice', 'border-image-slice') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>Initial specification</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>{{ CompatGeckoDesktop("15.0") }}</td>
        <td>15.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>space</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoMobile("15.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>space</code></td>
        <td>{{ CompatNo() }}&nbsp;</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="See_also">See also</h3>
<ul>
  <li>{{ CSS_border_image() }}</li>
</ul>
Revert to this revision