Border-Image: Outset

The border-image-outset property specifies the amount by which the border-image area extends beyond the border box on all four sides. The default value is 0.
Currently, this is not supported in any browsers, and it will make the entire declaration fail, so don’t use it at all!

Border-Image: Repeat

The border-image-repeat property allows you to delineate how non-corner images (the sides and middle) are repeated and/or scaled. The first value is the top and bottom, the second value is the left and right sides. If the second value is omitted, all four sides will have the same value.

The specifications currently define four possible values, with the first three well supported:

  1. Stretch = image is not be tiled, it is stretched to fill the area
  2. Repeat = image is tiled (repeated) to fill the area. If the area allocated for the repeating image is not exactly divisible by the width of the image, the last tiled image may be cut off, causing distortion.
  3. Round = image is tiled (repeated) to fill the area, with the image being scaled down, possibly losing its aspect ratio, but ensuring that the image is never cropped.
  4. Space = (not currently supported) image is repeated as many times as can fully fit in area provided, the tiles are evenly spaced with white space between the tiles if the width provided is not an exact multiple of the image size

This demonstration shows what happens as we manipulate the middle sections of our border-images:

HTML file: Displayed by browser:
<style>
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border.png) 28 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border.png) 28 stretch; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border.png) 28 stretch;
}
#borderimga {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border.png) 28 repeat; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border.png) 28 repeat; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border.png) 28 repeat;
}
#borderimgb {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border.png) 28 round; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border.png) 28 round; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border.png) 28 round;
}
#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border1.png) 35 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border1.png) 35 stretch; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border1.png) 35 stretch;
}
#borderimg1a {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border1.png) 35 repeat; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border1.png) 35 repeat; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border1.png) 35 repeat;
}
#borderimg1b {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border1.png) 35 round; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border1.png) 35 round; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border1.png) 35 round;
}
#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border2.png) 8 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border2.png) 8 stretch; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border2.png) 8 stretch;
}
#borderimg2a {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border2.png) 8 repeat; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border2.png) 8 repeat; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border2.png) 8 repeat;
}
#borderimg2b {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../html_beg/images/border2.png) 8 round; /* Safari 3.1-5 */
    -o-border-image: url(../html_beg/images/border2.png) 8 round; /* Opera 11-12.1 */
    border-image: url(../html_beg/images/border2.png) 8 round;
}
</style>
<body>
<p>Using this image:</p><img src="../html_beg/images/border.png" alt="1st border" style="height:81px; width:81px;">
<p id="borderimg">Stretch -- The border-image property defines this border around an element.</p>
<p id="borderimga">Repeat -- The border-image property defines this border around an element. Notice the slight distortion at the corners.</p>
<p id="borderimgb">Round -- The border-image property defines this border around an element. </p>
<hr />
<p>Using this image:</p><img src="../html_beg/images/border1.png" alt="2nd border" style="height:97px; width:97px;">
<p id="borderimg1">Stretch -- The border-image property defines this border around an element. Gradients should always be stretched because repeating them creates harsh lines as one tile ends and the next begins.</p>
<p id="borderimg1a">Repeat -- The border-image property defines this border around an element.</p>
<p id="borderimg1b">Round -- The border-image property defines this border around an element. </p>
<p><i>If we had used the inverse, the effect would be odd. While the top and bottom can use round, repeat or stretch, the left and right sides definitely need the stretch value.</i></p>
<hr />
<p>Using this image:</p><img src="../html_beg/images/border2.png" alt="3rd border" style="height:30px; width:30px;">
<p id="borderimg2">Stretch -- The border-image property defines this border around an element.</p>
<p id="borderimg2a">Repeat -- The border-image property defines this border around an element. While it may seem to make sense to use repeat for the stamp, we have no way of knowing if the image is evenly divisible by the width of our design. You can see the design being cut off at the corners.</p>
<p id="borderimg2b">Round -- The border-image property defines this border around an element. The round does distort the image ever so slightly, but that is better than having the image cut off.</p>
</body>

Using this image:

1st border

Stretch -- The border-image property defines this border around an element.

Repeat -- The border-image property defines this border around an element. Notice the slight distortion at the corners.

Round -- The border-image property defines this border around an element.

Using this image:

2nd border

Stretch -- The border-image property defines this border around an element. Gradients should always be stretched because repeating them creates harsh lines as one tile ends and the next begins.

Repeat -- The border-image property defines this border around an element.

Round -- The border-image property defines this border around an element.

If we had used the inverse, the effect would be odd. While the top and bottom can use round, repeat or stretch, the left and right sides definitely need the stretch value.

Using this image:

3rd border

Stretch -- The border-image property defines this border around an element.

Repeat -- The border-image property defines this border around an element. While it may seem to make sense to use repeat for the stamp, we have no way of knowing if the image is evenly divisible by the width of our design. You can see the design being cut off at the corners.

Round -- The border-image property defines this border around an element. The round does distort the image ever so slightly, but that is better than having the image cut off.

Note: Webkit doesn’t support the round value, replacing it with repeat instead. Also: Internet Explorer 10, and earlier versions, do not support the border-image property.

Back button Table of Contents Next button