HTML and CSS Reference
In-Depth Information
Using Border Images
For a more decorative border, you need to use an image. In CSS2.1, this involves creating up to nine images and
wrapping the element in a complex series of
<div>
elements. CSS3 simplifies the process by using just one image,
which the browser automatically slices into nine sections (see Figure
9-19
) to build the border. If you use Adobe
Flash or Fireworks, this concept will be familiar to you as 9-slice scaling.
Figure 9-19.
The border is created by utilizing different sections of a single image
The browser positions the four corner slices, and scales or tiles each side to fill the width and height. The
dimensions of the border image aren't important. You just need a design that can be sliced this way.
■
Note
The browser doesn't physically slice the image. it masks the individual sections when using them.
At the time of this writing, Chrome is the only browser with full support for border images. Of the other
mainstream browsers, Safari, Firefox, and Opera have implemented enough to be usable, but Internet Explorer
has no support at all.
Although Firefox and Opera currently support only the shorthand
border-image
property, I'll describe the
individual properties first because they make the shorthand easier to understand.
Individual Properties for Border Images
There are five individual properties for border images, as described in Table
9-4
.
