This is a simplified shorthand syntax for this property:
border-image: url(/img/posts/border-image.png) h w type;
Here is my border base image. It represents the base image for the border that will be make an outline border around the content. It's better to think of it as a background property with enhanced controls for border. It's like a miniature version of the actual border. Preferably, the image should look like a type of frame. The width and the height values determine how much of the image is going to be used for the border and the remaining part of the image is automatically used as the background.
The height of the border is 28 pixels here, but you need to add few more pixels to include the inner curve in the slice. Same goes for the width. 33 and 32 pixels will be used for height and width respectively. The type value also determines the actual shape of the slice from four corners of the image.
This is the HTML 5 format according to W3C, but it isn't fully supported by most of browsers as of today. However, Opera seems to render it correctly, after all, Opera is the most standard compliant browser out there.
border-width: 15px; border-image: url(/img/border-image.png) 33 32 stretch; width: 580px; padding: 15px;
These two lines accommodate for WebKit and Mozilla-based renderers.
-webkit-border-image: url(/img/border-image.png) 33 32 stretch; -moz-border-image: url(/img/border-image.png) 33 32 stretch;
Normally, the stretch attribute value is used for solid and gradient borders. The round attribute value is used for border image that contains circular shapes.
1 ^CSS Backgrounds and Borders Module Level 3. May 20, 2010. <http://www.w3.org/TR/2009/CR-css3-background-20091217/#the-border-image-slice>