Marusya's School Notes

Border-Image: Definition

The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element. This property has three parts:

The image to use as the border
Where to slice the image
Define whether the middle sections should be repeated or stretched

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify. Here, the middle sections of the image are repeated to create the border:

HTML file:

Displayed by browser:

<body>
<p>The original image is on the left. On the right, you can see how it's sliced:</p>
<table class="small">
    <tr>
        <td class="small"><img src="../html_beg/images/border.png"></td>
        <td class="small" style="float:right;"><img src="../html_beg/images/bordersliced.png"></td>
    </tr>
    <tr>
        <td class="small"><img src="../html_beg/images/border1.png"></td>
        <td class="small" style="float:right;"><img src="../html_beg/images/border1sliced.png"></td>
    </tr>
    <tr>
        <td class="small"><img src="../html_beg/images/border2.png"></td>
        <td class="small" style="float:right;"><img src="../html_beg/images/border2sliced.png"></td>
    </tr>
</table>
<hr />
<p>The border-image-source property indicates which image to use as the border around an element:</p>
<p id="borderimg">With the corners maintained, we REPEAT the middle sections of the first image to create this border.</p>
<p id="borderimg1">We maintain the corners of the second image, but this time, we use STRETCH to create a smooth border with the 2nd image.</p>
<p id="borderimg2">Instead of repeating or stretching the middle sections of the border-image, we use ROUND, creating a stamp-like effect. Althought we slightly distort the image, and ensure we don’t have a broken border in supporting browsers, the width should be a multiple of the slice’s width.</p>
<p><i>Even when repeating the top, bottom and sides, we maintained the four corners.</i></p>
</body>

The original image is on the left. On the right, you can see how it's sliced:

The border-image-source property indicates which image to use as the border around an element:

With the corners maintained, we REPEAT the middle sections of the first image to create this border.

We maintain the corners of the second image, but this time, we use STRETCH to create a smooth border with the 2nd image.

Instead of repeating or stretching the middle sections of the border-image, we use ROUND, creating a stamp-like effect. Althought we slightly distort the image, and ensure we don’t have a broken border in supporting browsers, the width should be a multiple of the slice’s width.

Even when repeating the top, bottom and sides, we maintained the four corners.

Note: For border-image to work, the element needs its border property set first! Also note that Internet Explorer 10, and earlier versions, do not support the border-image property.