HTML and CSS Reference
FIGURE 4.38 Border images at
half the size—very funkalistic.
And there's one more detail you should know about the basic syntax. To actually
provide space for your border image, you need to specify a border width, which is
why border-width: 30px; was included in the code example. If you don't do this,
you won't see anything. The border-width property offers additional interesting
possibilities: If you make the border width bigger or smaller than the slices within
the border-image property, the slice size will scale up or down to suit. So, if you
make the border half as big, like so:
the border image slices will be displayed in half dimensions, as shown in Figure 4.38 !
Using border-image is not all plain sailing, of course, as with most things in web
design. Aside from the fact that WebKit-based browsers currently don't use the
round value properly, there are a couple of other issues to keep in mind.
First, you need to determine if you want your central slice to be discarded
or not. You might want the central slice to act as the background for your con-
tainer content, or you might just want to put the border image only in the border.
Unfortunately, the default behavior according to the spec is to discard it, but most
browsers do the opposite, except for Chrome (try comparing border-image-2.html
in Chrome and Opera). You are supposed to be able to control this behavior with
border-image-slice , but this property is currently not supported in any browser,