Adding Borders and Drop Shadows - Beginning CSS3 - page 201

Figure 9-22. Different repeat values have been set for the horizontal and vertical slices

Using the Shorthand Property for Border Images
he shorthand border-image property combines the five individual properties in a single declaration. At the time
of this writing, only Chrome has full support for the shorthand property. Firefox, Safari, and Opera have incomplete
support and require browser-specific prefixes. However, by the time you read this, any shortcomings will hopefully
have been ironed out. So, I'll begin by describing the full syntax, followed by what currently works cross-browser.

Full Shorthand Syntax
The shorthand syntax combines the individual properties like this:
border-image: source slices / width / outset repeat;
As explained in the preceding section, only the image source and slices are required. The other three values
are optional. However, note the following rules:

• If you include 1-4 values for width, they must follow the values for slices, separated by a

forward slash.

• To include 1-4 values for outset, they must follow the width values, separated by a

forward slash.

• You cannot specify values for outset without also setting width.

• If you omit width and outset, there should be no slash between any of the values.

Although the border slices in frame1.png are all 24px wide, I have assigned three values each to the width
and outset properties in border-image6.html to demonstrate how to use the full shorthand syntax like this:
#poem {
/* Other styles omitted */
-webkit-border-image: url(images/frame1.png) 24 fill / 18px 12px 24px / 6px 12px 12px 
round stretch;
border-image: url(images/frame1.png) 24 fill / 18px 12px 24px / 6px 12px 12px 
round stretch;
}