MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 296231 of border-image-slice

  • Revision slug: CSS/border-image-slice
  • Revision title: border-image-slice
  • Revision id: 296231
  • 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 placed between any value */ E.g. border-image-slice: 10% fill 7em 12px;

border-image-slice: inherit

Values

slice
Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the four slicing lines. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents pixels for raster images and coordinates for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
horizontal
Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents pixels for raster images and coordinates for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
vertical
Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents pixels for raster images and coordinates for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
top
Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the top slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents pixels for raster images and coordinates for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
bottom
Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the bottom slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents pixels for raster images and coordinates for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
right
Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the right slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents pixels for raster images and coordinates for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
left
Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the left slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents pixels for raster images and coordinates for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

Examples

 

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() }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

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 placed between any value */ E.g. border-image-slice: 10% fill 7em 12px;

border-image-slice: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code><em>slice</em></code></dt>
  <dd>
    Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the four slicing lines. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
  <dt>
    <em>horizontal</em></dt>
  <dd>
    Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
  <dt>
    <em>vertical</em></dt>
  <dd>
    Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
  <dt>
    <em>top</em></dt>
  <dd>
    Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the top slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
  <dt>
    <em>bottom</em></dt>
  <dd>
    Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the bottom slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
  <dt>
    <em>right</em></dt>
  <dd>
    Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the right slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
  <dt>
    <em>left</em></dt>
  <dd>
    Is a {{ xref_cssnumber() }} or a {{ xref_csspercentage() }} of the offset for the left slicing line. Note that a {{ xref_csslength() }} value is not allowed, and therefore invalid. The {{ xref_cssnumber() }} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{ xref_csspercentage() }} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
</dl>
<h2 id="Specifications" name="Specifications">Examples</h2>
<p>&nbsp;</p>
<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>
    </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>
    </tbody>
  </table>
</div>
<h3 id="See_also">See also</h3>
<ul>
  <li>{{ CSS_border_image() }}</li>
</ul>
Revert to this revision