border-image-repeat

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

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.

{{cssbox("border-image-repeat")}}

Syntax

Formal syntax: {{csssyntax("border-image-repeat")}}  
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

Values

type
Is one of the stretch, repeat, round, and space keywords denoting the way of repeating the image. It is used only in the one-value syntax.
horizontal
Is one of the stretch, repeat, round, and space keywords a keyword denoting the way of repeating the image. It is used only in the two-value syntax.
vertical
Is one of the stretch, repeat, round, and space keywords a keyword denoting the way of repeating the images. It is used only in the two-value syntax.
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.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Examples

See {{cssxref("border-image")}} for examples of what the various repeat values will do.

Specifications

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

Browser compatibility

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

A space value was present in early Candidate Recommendation versions. As no browsers were implemented it, it was removed. It may reappear in future draft.

See also

  • {{CSS_border_image}}

Revision Source

<div>
  {{CSSRef}}</div>
<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>
<div>
  {{cssbox("border-image-repeat")}}</div>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-image-repeat")}}  </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>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <em>type</em></dt>
  <dd>
    Is one of the <code>stretch</code>, <code>repeat</code>, <code>round</code>, and <code>space</code> keywords denoting the way of repeating the image. It is used only in the one-value syntax.</dd>
  <dt>
    <em>horizontal</em></dt>
  <dd>
    Is one of the <code>stretch</code>, <code>repeat</code>, <code>round</code>, and <code>space</code> keywords a keyword denoting the way of repeating the image. It is used only in the two-value syntax.</dd>
  <dt>
    <em>vertical</em></dt>
  <dd>
    Is one of the <code>stretch</code>, <code>repeat</code>, <code>round</code>, and <code>space</code> keywords a keyword denoting the way of repeating the images. It is used only in the two-value syntax.</dd>
  <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>inherit</code></dt>
  <dd>
    Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
</dl>


<h2 id="Examples" name="Examples">Examples</h2>
<p>See {{cssxref("border-image")}} for examples of what the various repeat values will do.</p>


<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-repeat', 'border-image-repeat')}}</td>
      <td>{{Spec2('CSS3 Backgrounds')}}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<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("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>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("15.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>A <code>space</code> value was present in early Candidate Recommendation versions. As no browsers were implemented it, it was removed. It may reappear in future draft.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{CSS_border_image}}</li>
</ul>
Revert to this revision