Border Image

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:

1 border: 5px solid #cccccc;
2 -webkit-border-image: url(/images/border-image.png) 5 repeat;
3 -moz-border-image: url(/images/border-image.png) 5 repeat;
4 border-image: url(/images/border-image.png) 5 repeat;

The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area.

Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:

1 border-bottom-right-image
2 border-bottom-image
3 border-bottom-left-image
4 border-left-image
5 border-top-left-image
6 border-top-image
7 border-top-right-image
8 border-right-image

Supported in Firefox 3.1, Safari and Chrome.