Adding Borders and Drop Shadows - Beginning CSS3 - page 202

The shorthand is the equivalent of using the following individual properties:
border-image-source: url(images/frame1.png);
border-image-slice: 24 fill;
border-image-width: 18px 12px 24px;
border-image-outset: 6px 12px 12px;
border-image-repeat: round stretch;
As Figure 9-23 shows, the result isn't particularly attractive, but it demonstrates how you can alter the width
and position of individual sides.
Figure 9-23. Different widths have been applied to the slices
The full shorthand syntax in the preceding example is currently supported only in Chrome. Safari requires
the -webkit prefix and almost gets it right. However, Safari doesn't yet support the fill keyword. The styles in
border-image7.html are identical to the preceding example, except that the fill keyword has been removed.
If you test border-image7.html in Chrome, the center slice is discarded, and the white background of the page
shows through. Currently, Safari incorrectly displays the center slice.
Most Widely Supported Syntax for Border Images
Until Firefox and Opera implement the full specification, the most reliable cross-browser way of using border
images is to use an incomplete version of the shorthand property, omitting the width and outset values. In fact,
unless you need to scale the slices, this is probably all that you will need most of the time. Like Safari, Firefox and
Opera require browser-specific prefixes, and they don't support the fill keyword. However, unlike Safari, they
don't simply ignore fill . If you use it, they refuse to display the border image.
The style rule in border-image8.html specifies a fallback border for older browsers together with the border-
image shorthand optimized for the current level of browser support like this:
#poem {
/* Other rules omitted */
border: 24px double #4B8896;
-moz-border-image: url(images/frame1.png) 24 round;
-o-border-image: url(images/frame1.png) 24 round;
-webkit-border-image: url(images/frame1.png) 24 fill round;
border-image: url(images/frame1.png) 24 fill round;
}