CSS3 HTML5 Graphical Boundary example

As the name suggests, a graphical boundary is a boundary that allows a picture to be used as an object, with the following syntax:

border:5px solid #cccccc;

-webkit-border-image:url (/images/border-image.png) 5 repeat;

-moz-border-image:url (/images/border-image.png) 5 repeat;

Border-image:url (/images/border-image.png) 5 repeat;

Here, border:5px sets the width of the boundary, and then the picture definition for each boundary tells the browser how much of the picture is used to act as a boundary. Border pictures can also be set individually for each edge:

Border-bottom-rightright-image

Border-bottom-image

Border-bottom-left-image

Border-left-image

Border-top-left-image

Border-top-image

Border-top-rightright-image

Border-right-image

Supported Browsers: Firefox 3.1, Safari, Chrome.