border-image-repeat

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

Revision Content

{{ CSSRef() }}

Summary

The border-image-repeat CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

  • {{ Xref_cssinitial() }}: stretch
  • Applies to: all elements, except internal table elements when {{ cssxref("border-collapse") }} is set to collapse.
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified
  • Animatable: no

Syntax

Formal grammar: [ stretch | repeat | round | space ]{1,2}  
border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

border-image-repeat: inherit

where:

type
Is a keyword denoting the way of repeating the image. It is used only in the one-value syntax.
horizontal
Is a keyword denoting the way of repeating the image. It is used only in the two-value syntax.
vertical
Is a keyword denoting the way of repeating the images. It is used only in the two-value syntax.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

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
CSS Backgrounds and Borders Module Level 3 {{ 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-repeat</code> CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>stretch</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>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: [ stretch | repeat | round | space ]{1,2}  </pre>
<pre>
border-image-repeat: <em>type</em>                    <em>  /* One-value syntax */</em>       E.g. border-image-value: stretch;
border-image-repeat: <em>horizontal</em> <em>vertical</em>       <em>/* Two-value syntax */       </em>E.g. border-image-width: round space;

border-image-repeat: 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>type</em></dt>
    <dd style="padding-left:7.5em">
      Is a keyword denoting the way of repeating the image. 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 keyword denoting the way of repeating the image. 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 keyword denoting the way of repeating the images. It is used only in the two-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>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><a class="external" href="http://dev.w3.org/csswg/css3-background/#border-image-repeat" title="http://dev.w3.org/csswg/css3-background/#border-image-repeat">CSS Backgrounds and Borders Module Level 3</a></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