HTML5: Your visual blueprint™ for designing rich web pages and applications

APPLY AN IMAGE AS AN ELEMENT BORDER

You can create custom borders around elements with the help of image templates and CSS3’s new border-image property. Web browsers that support this feature dynamically map your template image to correctly stretch and shrink its edges to match the selected object, but leave the corners intact:

border-image: source slice repeat;
border-width: width;

The source value should be in the form of url(imagefile) to load the border template image. The slice value can be one to four numbers or percentages, representing the inward offsets from the source image, dividing it into nine segments: four corners, four edges, and a middle block.

When sized correctly, border-image attempts to use exactly one segment for each ...