border-image

  • Revision slug: CSS/border-image
  • Revision title: border-image
  • Revision id: 14195
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 24 words added, 2 words removed

Revision Content

{{ CSSMozExtensionRef() }} {{ gecko_minversion_header("1.9.1") }}

Summary

The border-image property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine-boxes in some cases.

The border-image is used instead of the border styles given by the border-style properties.  If the value is none or if the image cannot be displayed, the border styles will be used. An additional background image for the element is drawn on top of the {{ Cssxref("background-image") }}.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements, ,except table elements when border-collapse is collapse
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: any URI made absolute, any <length> made absolute, other parts as specified

Syntax

none | 
  [ <image> [<number> | <percentage>]{1,4} [/ <border-width>{1,4}]? ] && 
  [ stretch | repeat | round ]{0,2}

Values

none
No image displayed, other border styles are used.
<image> (required)
The image value is a <uri>, e.g. url(http://example.org/image.png)
number | percentage {1,4} (required)
One, two, three or five numbers describing how to break up the image. The first is the height of the top edge (and of both top corners). The second is the width of the right edge (and of both right corners). The third is the height of the bottom edge. And the fourth is the width of the left edge. If the fourth is left out it is assumed the same as the second. If the third is left out, it is assumed the same as the first. And if only one value is given than all values are assumed the same. Percentages are relative to the size of the image. Numbers represent pixels in the image. [this needs an illustration]
<border-width> (optional)
If the slash / is present in the property value, the one, two, three or four values after it are used for the width of the border instead of the {{ cssxref("border-width") }} properties. The order of the values is the same as for {{ cssxref("border-width") }}.
stretch | round | repeat {0,2} (optional)
Up to two keywords, that specify how the images for the sides and the middle part are scaled and tiled.
stretch will cause images to be scaled to fit their box.
round will tile the images, but also scale them so that a whole number fit in the box.
repeat simply tiles the images inside the box.
The first keyword describes how to draw the top, middle, and bottom images, while the second describes the left and right borders. If the second is absent, it is assumed to be the same as the first. If both are absent, the default value stretch is used. [needs plain an simple explanation, just copying the spec wouldn't help much, IMHO]

Examples

[needs some instructive live examples]

#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; } 

.button  { -moz-border-image: url(button.png) 0 5 0 5; }

.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px ;

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer N/A
Firefox 3.5 -moz-border-image
Opera N/A
Safari 3.0 -webkit-border-image

This page has been flagged by editors or users as needing technical review

Until it is fully reviewed, it may contain inaccurate or incorrect information.

Revision Source

<p>{{ CSSMozExtensionRef() }} {{ gecko_minversion_header("1.9.1") }}</p>
<h3 name="Summary">Summary</h3>
<p>The<code> border-image </code>property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine-boxes in some cases.</p>
<p>The<code> border-image </code>is used instead of the border styles given by the<code class="property"> border-style </code>properties.  If the value is<code> none </code>or if the image cannot be displayed, the border styles will be used. An additional background image for the element is drawn on top of the {{ Cssxref("background-image") }}.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements, ,except table elements when<code> <code class="property">border-collapse</code> </code>is<code> <code class="css">collapse</code></code></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: any URI made absolute, any &lt;length&gt; made absolute, other parts as specified</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre>none | 
  [ &lt;image&gt; [&lt;number&gt; | &lt;percentage&gt;]{1,4} [/ &lt;border-width&gt;{1,4}]? ] &amp;&amp; 
  [ stretch | repeat | round ]{0,2}
</pre>
<h3 name="Values">Values</h3>
<dl><dt>none</dt><dd>No image displayed, other border styles are used.</dd><dt>&lt;image&gt; <span style="font-size: x-small;">(required)</span><br>
</dt><dd> The image value is a <code class="css">&lt;uri&gt;</code>, e.g.<code class="plain"> url(http://example.org/image.png)</code></dd><dt>number | percentage {1,4} <span style="font-size: x-small;">(required)</span><br>
</dt><dd> One, two, three or five numbers describing how to break up the image. The first is the height of the top edge (and of both top corners). The second is the width of the right edge (and of both right corners). The third is the height of the bottom edge. And the fourth is the width of the left edge. If the fourth is left out it is assumed the same as the second. If the third is left out, it is assumed the same as the first. And if only one value is given than all values are assumed the same.<em> Percentages </em>are relative to the size of the image.<em> Numbers </em>represent pixels in the image. [this needs an illustration]<br>
</dd><dt>&lt;border-width&gt; <span style="font-size: x-small;">(optional)</span><br>
</dt><dd>If the slash <strong>/</strong> is present in the property value, the one, two, three or four values after it are used for the width of the border instead of the {{ cssxref("border-width") }} properties. The order of the values is the same as for {{ cssxref("border-width") }}.</dd><dt>stretch | round | repeat {0,2} <span style="font-size: x-small;">(optional)</span><br>
</dt><dd>Up to two keywords, that specify how the images for the sides and the middle part are scaled and tiled.<br>
<code>stretch </code>will cause images to be scaled to fit their box.<br>
<code>round </code>will tile the images, but also scale them so that a whole number fit in the box.<br>
<code>repeat </code>simply tiles the images inside the box. <br>
The first keyword describes how to draw the top, middle, and bottom images, while the second describes the left and right borders. If the second is absent, it is assumed to be the same as the first. If both are absent, the default value<code> stretch </code>is used. [needs plain an simple explanation, just copying the spec wouldn't help much, IMHO]<br>
</dd></dl><h3 name="Examples">Examples</h3>
<p>[needs some instructive live examples]</p>
<pre>#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; } 

.button  { -moz-border-image: <span>url</span><span style="font-weight: bold;">(</span>button.png<span style="font-weight: bold;">)</span> <span>0</span> <span>5</span> <span>0</span> <span>5</span>; }

.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px ;
</pre>
<h3 name="Notes">Notes</h3>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-border-image-property" title="http://dev.w3.org/csswg/css3-background/#the-border-image-property">CSS 3 Backgrounds and Borders, Editor's Draft</a> </li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>N/A</td> </tr> <tr> <td>Firefox</td> <td>3.5<code> -moz-border-image</code></td> </tr> <tr> <td>Opera</td> <td>N/A</td> </tr> <tr> <td>Safari</td> <td>3.0<code> -webkit-border-image</code></td> </tr> </tbody>
</table>
<p><span class="lang lang-*">
</span></p><div style="border: 1px solid navajowhite; background-color: lemonchiffon; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: center; margin-bottom: 1em;">
<div style="border-bottom: 1px solid navajowhite; color: coral; font-size: 1em; font-weight: bold;">
<p>This page has been flagged by editors or users as needing technical review</p>
</div>
<p>Until it is fully reviewed, it may contain inaccurate or incorrect information.</p>
</div>
<p></p>
Revert to this revision