border-image

  • Revision slug: CSS/border-image
  • Revision title: border-image
  • Revision id: 14185
  • Created:
  • Creator: j.j.
  • Is current revision? No
  • Comment 14 words added

Revision Content

{{ CSSRef() }} {{ Fx_minversion_header("3") }}

Summary

The border image property allows you draw an image around 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.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: a url, four lengths, and a repeat property

Syntax

-moz-border-image: [<uri> | none] | [number | <percentage>]{1,4} [ stretch | repeat | round ]{0,2}

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

Values

 

 

 

<uri> 

 

The image to use for the border images.

 

{1,4} lengths/percentage

 

A set of 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.
{1,2} stretch/round/repeat
A set of instructions describing how to scale/tile the images. 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.

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 stretch stretch;}

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer N/A
Firefox 3.1 -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>{{ CSSRef() }} {{ Fx_minversion_header("3") }}</p>
<h3 name="Summary">Summary</h3>
<p>The border image property allows you draw an image around 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>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: a url, four lengths, and a repeat property</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<p><code>-moz-border-image: [&lt;uri&gt; | none] | [number | &lt;percentage&gt;]{1,4} [ stretch | repeat | round ]<span style="font-family: Verdana,Tahoma,sans-serif;">{0,2}</span></code></p>
<p>none | <var>&lt;image&gt;</var> [ <var>&lt;number&gt;</var> | <var><a class=" external" href="http://www.w3.org/TR/2008/WD-css3-background-20080910/#position-percentage">&lt;percentage&gt;</a></var>]{1,4} [ / <var><a class=" external" href="http://www.w3.org/TR/2008/WD-css3-background-20080910/#ltborder-widthgt">&lt;border-width&gt;</a></var>{1,4} ]? [ stretch | repeat | round ]{0,2}</p>
<h3 name="Values">Values</h3>
<p style="text-align: left;"> </p>
<dl>
<p> </p>
<p> </p>
<dl><dt style="text-align: left;"> <code>&lt;uri&gt;</code> </dt></dl>
<p> </p>
<dl style="text-align: left;"><dl><dd> The image to use for the border images.</dd></dl> <dl></dl>
<p> </p>
<dl><dt style="text-align: left;"><code>{1,4} lengths/percentage</code></dt></dl>
<p> </p>
<dl style="text-align: left;"><dl><dd> A set of 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.</dd></dl><dt style="text-align: left;"><code>{1,2} stretch/round/repeat</code></dt></dl><dl><dd> A set of instructions describing how to scale/tile the images. <code>stretch </code>will cause images to be scaled to fit their box. <code>round </code>will tile the images, but also scale them so that a whole number fit in the box. <code>repeat </code>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.<br>
</dd></dl><dl style="text-align: left;"><br>
</dl>
<h3 name="Examples">Examples</h3>
<pre>  #header { -moz-border-image: url(border.png) 27 27 27 27 round round; }
</pre>
<pre>  .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> stretch stretch;}
</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" title="http://dev.w3.org/csswg/css3-background/#the-border-image">CSS 3 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.1<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: lemonchiffon none repeat scroll 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></dl></dl>
Revert to this revision