mozilla

Revision 14201 of border-image

  • Revision slug: CSS/border-image
  • Revision title: border-image
  • Revision id: 14201
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment formatting; 25 words added, 15 words removed

Revision Content

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

Summary

The border-image CSS 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.

Warning: The official CSS 3 specification for the border-image property changed significantly between the time this feature was frozen for Gecko 1.9.1 and its release. As such, both the syntax and semantics of this feature will probably change in future releases of Gecko. In particular, the optional border-width override has been removed from the specification and will almost certainly be removed in a future version of Gecko.

The border-image is used instead of the border styles given by the {{ cssxref("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 {{ cssxref("border-collapse") }} is collapse
  • {{ Xref_cssinherited() }}: no
  • 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 {{ Xref_cssuri() }}, 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 and 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;

Specifications

Browser compatibility

Browser Lowest Version Support of
Internet Explorer --- ---
Firefox (Gecko) 3.5 (1.9.1) -moz-border-image
Opera --- ---
Safari (WebKit) 3.0 (522) -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>Summary</h3>
<p>The<code> border-image </code>CSS 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>
<div class="warning"><strong>Warning:</strong> The official CSS 3 specification for the border-image property changed significantly between the time this feature was frozen for Gecko 1.9.1 and its release. As such, both the syntax and semantics of this feature will probably change in future releases of Gecko. In particular, the optional<code> border-width </code>override has been removed from the specification and will almost certainly be removed in a future version of Gecko.</div>
<p>The<code> border-image </code>is used instead of the border styles given by the {{ cssxref("border-style") }} 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 {{ cssxref("border-collapse") }} is<code> <code class="css">collapse</code></code></li> <li>{{ Xref_cssinherited() }}: no</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>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>Values</h3>
<dl> <dt>none</dt> <dd>No image displayed, other border styles are used.</dd> <dt>&lt;image&gt; <small>(required)</small></dt> <dd> The image value is a {{ Xref_cssuri() }}, e.g.<code class="plain"> url(http://example.org/image.png)</code></dd> <dt>number | percentage {1,4} <small>(required)</small></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]</dd> <dt>&lt;border-width&gt; <small>(optional)</small></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} <small>(optional)</small></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 and simple explanation, just copying the spec wouldn't help much, IMHO]</dd>
</dl>
<h3>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: url(button.png) 0 5 0 5; }

.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px;
</pre>
<h3>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</a> Editor's draft, work in progress</li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>3.5</strong> (1.9.1)</td> <td><code>-moz-border-image</code></td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>3.0</strong> (522)</td> <td><code>-webkit-border-image</code></td> </tr> </tbody>
</table>
<div style="border: 1px solid navajowhite; background-color: lemonchiffon; text-align: center; margin-bottom: 1em;">
<div style="border-bottom: 1px solid navajowhite; color: coral; font-size: 1em; font-weight: bold;">This page has been flagged by editors or users as needing technical review</div>
Until it is fully reviewed, it may contain inaccurate or incorrect information.</div>
<p> </p>
Revert to this revision