Border and Box Effects 107
I said a few paragraphs ago that border-image-repeat accepts one of
three keyword values, but that’s not actually correct;―I only said it to make
the subsequent explanation a little clearer. I hope you can forgive me for
misleading you. In fact, you can use two of the three keyword values on the
property; the first controls horizontal repetition, the second, vertical. So
if you want to stretch your element along the top and bottom borders and
round it along the left and right, you use this rule:
E { border-image-repeat: stretch round; }
The border-image Shorthand Property
To save time and keystrokes, you can use the border-image shorthand for all
of the properties just described. The syntax looks like this:
E { border-image: source slice / width / outset repeat; }
The following code example shows all of the individual properties
applied to an element and then the same properties applied to another ele-
ment using the shorthand property:
E {
border-image-source: url('foo.png');
border-image-slice: 25 10 fill;
border-image-width: 25px 10px;
border-image-outset: 5px;
border-image-repeat: round;
}
F { border-image: url('foo.png') 25 10 fill / 25px 10px / 5px round; }
That’s quite the space saver.
Browser Support
All of the border-image properties in this section are supported in Chrome,
Firefox, Safari 6+, and Internet Explorer 11+. Some older browsers— notably
mobile Safari 5.1 and below, and the stock browser in Android 4.3 and
below—do support border images, but only using the border-image short-
hand and, even then, without the border-image-width and border-image-outset
properties.
Drop Shadows
In Chapter 6, we looked at a way to add drop shadows to text with the
text-shadow property, but CSS3 also has a method for adding shadows to
box elements. You use the box-shadow property; the syntax is similar to
that of text-shadow:
E { box-shadow: inset horizontal vertical blur-radius spread color; }
