border-image-width

  • Revision slug: CSS/border-image-width
  • Revision title: border-image-width
  • Revision id: 342661
  • Created:
  • Creator: hydrurga
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom and left edges.

  • {{ Xref_cssinitial() }} none
  • Applies to all elements, except internal table elements when {{ cssxref("border-collapse") }} is set to collapse.
  • {{ Xref_cssinherited() }} no
  • Percentage Relative to the width, for horizontal effects, or the height, for vertical effects, of the border image area.
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} all {{ xref_csslength() }} made absolute, or as specified
  • Animatable no

Syntax

Formal grammar: [ <length> | <percentage> | <number> | auto ]{1,4} 
border-image-width: width                      /* One-value syntax */       E.g. border-image-width: 3;
border-image-width: horizontal vertical        /* Two-value syntax */       E.g. border-image-width: 2em 3em;
border-image-width: top vertical bottom        /* Three-value syntax */     E.g. border-image-width: 5% 15% 10%;
border-image-width: top right bottom left      /* Four-value syntax */      E.g. border-image-width: 5% 2em 10% auto;

border-image-width: inherit

where:

width
Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
horizontal
Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.
vertical
Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
top
Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.
bottom
Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
right
Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the four-value syntax.
left
Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the four-value syntax.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Values

<length>
Represents the length of the image slice. It can be an absolute or relative length. This length must not be negative.
<percentage>
Represents the percentage of the image slice relative to the height, or width, of the border image area. The percentage must not be negative.
<number>
Represents a multiple of the computed value of the element's {{ cssxref("border-width") }} property to be used as the image slice size. The number must not be negative.
auto
Indicates that the width, or height, of the image size must be the intrinsic size of that dimension.

Specifications

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

Browser compatibility

{{ CompatibilityTable() }}

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

See also

  • {{ CSS_border_image() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>border-image-width</code> CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom and left edges.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>none</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> Relative to the width, for horizontal effects, or the height, for vertical effects, of the border image area.</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> all {{ xref_csslength() }} made absolute, or as specified</li>
  <li><dfn>Animatable</dfn> no</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal grammar: [ <a href="/en/CSS/length" title="en/CSS/length">&lt;length&gt;</a> | <a href="/en/CSS/percentage" title="percentage">&lt;percentage&gt;</a> | <a href="/en/CSS/number" title="en/CSS/number">&lt;number&gt;</a> | auto ]{1,4} 
</pre>
<pre>
border-image-width: <em>width</em>                    <em>  /* One-value syntax */</em>       E.g. border-image-width: 3;
border-image-width: <em>horizontal</em> <em>vertical</em>        <em>/* Two-value syntax */       </em>E.g. border-image-width: 2em 3em;
border-image-width: <em>top</em> <em>vertical</em> <em>bottom   </em><em>     /* Three-value syntax */     </em>E.g. border-image-width: 5% 15% 10%;
border-image-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left </em><em>     /* Four-value syntax */      </em>E.g. border-image-width: 5% 2em 10% auto;

border-image-width: inherit
</pre>
<div style="font-size: 0.9em;">
  <p style="float:left; margin:0:">where:</p>
  <dl style="padding-left:6em;">
    <dt style="float:left;width:7.5em">
      <em>width</em></dt>
    <dd style="padding-left:7.5em">
      Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.</dd>
    <dt style="float:left;width:7.5em">
      <em>horizontal</em></dt>
    <dd style="padding-left:7.5em">
      Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.</dd>
    <dt style="float:left;width:7.5em">
      <em>vertical</em></dt>
    <dd style="padding-left:7.5em">
      Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.</dd>
    <dt style="float:left;width:7.5em">
      <em>top</em></dt>
    <dd style="padding-left:7.5em">
      Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.</dd>
    <dt style="float:left;width:7.5em">
      <em>bottom</em></dt>
    <dd style="padding-left:7.5em">
      Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.</dd>
    <dt style="float:left;width:7.5em">
      <em>right</em></dt>
    <dd style="padding-left:7.5em">
      Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the four-value syntax.</dd>
    <dt style="float:left;width:7.5em">
      <em>left</em></dt>
    <dd style="padding-left:7.5em">
      Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the four-value syntax.</dd>
    <dt style="float:left;width:7.5em">
      <code>inherit</code></dt>
    <dd style="padding-left:7.5em">
      Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
  </dl>
</div>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;length&gt;</code></dt>
  <dd>
    Represents the length of the image slice. It can be an absolute or relative length. This length must not be negative.</dd>
  <dt>
    <code>&lt;percentage&gt;</code></dt>
  <dd>
    Represents the percentage of the image slice relative to the height, or width, of the border image area. The percentage must not be negative.</dd>
  <dt>
    <code>&lt;number&gt;</code></dt>
  <dd>
    Represents a multiple of the computed value of the element's {{ cssxref("border-width") }} property to be used as the image slice size. The number must not be negative.</dd>
  <dt>
    <code>auto</code></dt>
  <dd>
    Indicates that the width, or height, of the image size must be the intrinsic size of that dimension.</dd>
</dl>
<h2 id="Specifications" name="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-width', 'border-image-width') }}</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>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>15.0</td>
        <td>{{ CompatGeckoDesktop("13.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>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>{{ CompatGeckoMobile("13.0") }}</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