mozilla

Compare Revisions

border-image

Change Revisions

Revision 14213:

Revision 14213 by leaverou on

Revision 14214:

Revision 14214 by barryvan on

Title:
border-image
border-image
Slug:
CSS/border-image
CSS/border-image
Tags:
css, NeedsMarkupWork, NeedsBrowserCompatibility, "CSS Reference"
css, NeedsMarkupWork, NeedsBrowserCompatibility, "CSS Reference"
Content:

Revision 14213
Revision 14214
n35none | n35none |
36  [ <image> [ <number> | <percentage> ]{1,4} [/36  <image> || [[<number> | <percentage> ]{1,4} &
> <border-width>{1,4}]? ] && [ stretch | repeat | ro>amp;& fill?] [[/ [<length> | <percentage> | <n
>und ]{0,2} >umber> | auto ]{1,4} ]? [/ [<length> | <number> ]{
 >1,4}]?] || [ stretch | repeat | round | space ]{1,2}
nn38    <p>
39      That is,
40    </p>
41    <pre class="eval">
42<em>none |
43  &lt;‘border-image-source’&gt; || &lt;‘border-image-slice’&gt; [
 > / &lt;‘border-image-width’&gt;? [ / &lt;‘border-image-outset’&gt
 >; ]? ]? || &lt;‘border-image-repeat’&gt;</em>
44</pre>
n46        No image displayed, other border styles are used.n53        No image displayed; other border styles are used.
54      </dd>
47      </dd>55    </dl>
56    <h4>
57      border-image-source
58    </h4>
59    <p>
60      The image to use for the border.
61    </p>
62    <dl>
n52        The image value is a {{ Xref_cssuri() }}, e.g. <code clasn67        The image value is a {{ Xref_cssuri() }}, e.g. <code>url(
>s="plain">url(http://example.org/image.png)</code>><a class=" external" href="http://example.org/image.png" rel="fre
 >elink">http://example.org/image.png</a>)</code>
68      </dd>
53      </dd>69    </dl>
70    <h4>
71      border-image-slice
72    </h4>
73    <h4>
74      border-image-width
75    </h4>
76    <dl>
n58        One, two, three or four values represent inward offsets fn81        <p>
>rom the top, right, bottom, and left edges of the image (respecti 
>vely), dividing it into nine regions: four corners, four edges an 
>d a middle.<br> 
59        <img alt="" src="/@api/deki/files/3683/=slice.png" style=82          One, two, three or four values represent inward offsets
>"float:right"><br>> from the top, right, bottom and left edges of the image (respect
 >ively), dividing it into nine regions: four corners, four edges, 
 >and a middle.<img alt="" src="/@api/deki/files/3683/=slice.png" s
 >tyle="float: right;"><br>
83          <br>
60        One value belongs to all four sides of the image.<br>84          One value belongs to all four sides of the image.<br>
61        Two values belong 1. to top and bottom and 2. to right an85          Two values belong 1. to the top and bottom and 2. to th
>d left side.<br>>e right and left sides.<br>
62        Three values belong 1. to top, 2. to the right and left s86          Three values belong 1. to the top, 2. to the right and 
>ide and 3. to bottom.<br>>left sides, and 3. to the bottom.<br>
63        Four values belong to the top, right, bottom and left edg87          Four values belong to the top, right, bottom, and left 
>e of the image in that order.<br>>sides, in that order.<br>
64        <br>88          <br>
65        In Gecko 1.9.1 (Firefox 3.5) the middle part of the image
> is drawn like a background-image of the element. This may change 
> in future versions.<br> 
66        <br>
67        <strong>Percentages</strong> are relative to the width/he89          <strong>Percentages</strong> are relative to the width/
>ight of the image.<br>>height of the image.<br>
68        <strong>Numbers</strong> represent pixels in the image (i90          <strong>Numbers</strong> represent pixels in the image 
>f the image is a raster image) or vector coordinates (if the imag>(if the image is a raster image) or vector coordinates (if the im
>e is an SVG image).>age is an SVG image).<br>
91          <br>
92          Negative values are not allowed.<br>
93          Values greater than the size of the image are interpret
 >ed as 100%.
69      </dd>94        </p>
70      <dt>
71        &lt;border-width&gt; <small>(optional)</small>
72      </dt>
73      <dd>95      </dd>
74        If the slash <strong>/</strong> is present in the propert
>y 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 {{ cs 
>sxref("border-width") }}. 
75      </dd>
76      <dt>
77        stretch | round | repeat <small>(optional)</small>
78      </dt>96      <dt>
97        fill <small>(optional)</small>
98      </dt>
99      <dd>
100        If the "fill" keyword is present, the middle part of the 
 >border-image is preserved, and drawn as the background-image of t
 >he image. In Gecko 1.9.1 (Firefox 3.5) this is the default behavi
 >our; in Gecko 12, the default behaviour is to discard this area.
79      <dd>101      </dd>
102    </dl>
103    <dl>
104      <dt>
105        &lt;number&gt; | &lt;percentage&gt; | auto <small>(requir
 >ed)</small>
106      </dt>
107      <dd>
108        <p>
109          The border image is drawn inside an area (the <em>borde
 >r image area</em>) the boundaries of which correspond by default 
 >to the border box (which may be changed by border-image-outset). 
 >The four values specify the inward distances from the top, right,
 > bottom and left edges of the image (respectively).<br>
110          <br>
111          One value belongs to all four sides of the area.<br>
112          Two values belong 1. to the top and bottom and 2. to th
 >e right and left sides.<br>
113          Three values belong 1. to the top, 2. to the right and 
 >left sides, and 3. to the bottom.<br>
114          Four values belong to the top, right, bottom, and left 
 >sides, in that order.<br>
115          <br>
116          <strong>Percentages</strong> refer to the width and hei
 >ght of the border image area (as appropriate).<br>
117          <strong>Numbers</strong> represent multiples of the cor
 >responding computed border-width.<br>
118          <strong>auto</strong> means that the intrinsic width/he
 >ight (as applicable) of the corresponding image slice (border-ima
 >ge-slice) is used. If this is not available, then the border-widt
 >h values are used.<br>
119          <br>
120          Negative values are not allowed.
121        </p>
122      </dd>
123    </dl>
124    <h4>
125      border-image-outset
126    </h4>
127    <dl>
128      <dt>
129        &lt;length&gt; | &lt;number&gt; <small>(required)</small>
130      </dt>
131      <dd>
132        <p>
133          The border-image-outset values specify the amount by wh
 >ich the <em>border-image-area</em>extends beyond the border box. 
 >Its four values specify the outsets for the top, right, bottom an
 >d left edges of the box.<br>
134          <br>
135          One value belongs to all four sides of the box.<br>
136          Two values belong 1. to the top and bottom and 2. to th
 >e right and left sides.<br>
137          Three values belong 1. to the top, 2. to the right and 
 >left sides, and 3. to the bottom.<br>
138          Four values belong to the top, right, bottom, and left 
 >sides, in that order.<br>
139          <br>
140          <strong>Numbers</strong> represent multiples of the cor
 >responding computed border-width.<br>
141          <br>
142          Negative values are not allowed.
143        </p>
144      </dd>
145    </dl>
146    <div>
147      Note: outset images may be clipped by an ancestor or by the
 > viewport, so you may need to use other properties (such as margi
 >ns) if you wish to ensure that the full border-image is displayed
 >.
148    </div>
149    <h4>
150      border-image-repeat
151    </h4>
152    <dl>
153      <dt>
154        &lt;stretch&gt; | &lt;repeat&gt; | &lt;round&gt; | &lt;sp
 >ace&gt; <small>(required)</small>
155      </dt>
156      <dd>
157        <p>
80        One or two keywords, that specify how the images for the 158          Specifies how the images for the sides and the middle p
>sides and the middle part are scaled and tiled.<br>>art of the border-image are scaled and tiled.<br>
81        <strong><code>stretch&nbsp;</code></strong> (default valu159          <br>
>e) will cause images to be scaled to fit their box.<br> 
82        <strong><code>round &nbsp;&nbsp;</code></strong> will til160          One value belongs to both the horizontal and vertical s
>e the images, but also scale them so that a whole number fit in t>ides.<br>
>he box.<br> 
83        <strong><code>repeat &nbsp;</code></strong> simply tiles 161          Two values belong to 1. the horizontal sides, and 2. th
>the images inside the box.<br>>e vertical sides.<br>
84        The first keyword describes how to draw the top, middle, 162          <br>
>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. 
163          <strong>stretch</strong> specifies that the image shoul
 >d be stretched to fill the area.<br>
164          <strong>repeat</strong> indicates that the image should
 > be tiled (repeated) to fill the area.<br>
165          <strong>round</strong> means that the image is tiled to
 > fill the area; if a whole number of tiles cannot be used to fill
 > the area, the image is rescaled such that a whole number of tile
 >s may be used.<br>
166          <strong>space</strong> specifies that the image should 
 >be tiled to fill the area; if a whole number of tiles cannot be u
 >sed to fill the area, the extra space is distributed around the t
 >iles.
167        </p>
n93    <pre>n
94#header  { -moz-border-image: url(border.png) 27 27 27 27 round r
>ound; }  
95 
96.button  { -moz-border-image: url(button.png) 0 5 0 5; }
97 
98.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12p
>x 14px 22px; } 
99</pre>
100    <pre>
101/* Edge case, acts like a full scaled background-image in Firefox
> 3.5 */ 
102 
103 div     { -moz-border-image: url(bgimage.png) 0; } 
104</pre>
nn181    </div>
182    <div class="note">
183      <strong>Note:</strong> An earlier version of the specificat
 >ion was implemented in Gecko versions prior to 12.&nbsp;
n162              {{ CompatNo() }}<br>n236              {{ CompatGeckoDesktop("12") }}<br>
t183              {{ CompatNo() }}t257              {{ CompatGeckoDesktop("12") }}

Back to History