mozilla

Revision 485249 of border-image-repeat

  • Revision slug: Web/CSS/border-image-repeat
  • Revision title: border-image-repeat
  • Revision id: 485249
  • Created:
  • Creator: amycb
  • Is current revision? No
  • Comment Fixed grammar, consistency, etc.

Revision Content

{{CSSRef("CSS Borders")}}

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 how the image is repeated. It is used only in the one-value syntax.
horizontal
Is one of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the two-value syntax.
vertical
Is one of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the two-value syntax.
stretch
Is a keyword indicating that the image must be stretched to fill the gap between the two borders.
repeat
Is a keyword indicating that the image must be repeated until it fills the gap between the two borders.
round
Is a keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated an integer number of times, the image is rescaled to fit.
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 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 implemented it, the value was removed. It may reappear in future drafts.

See also

  • {{CSS_border_image}}

Revision Source

<div>
 {{CSSRef("CSS Borders")}}</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 how the image is repeated. 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 denoting how the image is repeated. 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 denoting how the image is repeated. 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 fill 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 fills 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 fills the gap between the two borders. If the image doesn't fit after being repeated an integer number of times, the image is rescaled to fit.</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 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 implemented it, the value was removed. It may reappear in future drafts.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{CSS_border_image}}</li>
</ul>
Revert to this revision