HTML and CSS Reference
In-Depth Information
BOX CLEVER:
BORDER-IMAGE
90px x 90px
FIGURE 4.33
A sample border
image.
30px x 30px
FIGURE 4.34
The image has
been carefully dressed around
the example container. Cool!
CSS3 provides you with more powerful properties to control borders. The most
interesting of these properties is
border-image
, which in effect allows you to divide
an image into different slices and dress the edges around any box you'd like. This
sounds a bit complicated, so let's walk through a simple example. To demonstrate
border-image
, I first created a simple image to grab a border from (
Figure 4.33
).
Next, I applied the border image neatly to the border of a larger box in a flexible
manner (
Figure 4.34
). Check out the border-image.html file in the chapter4 code
download folder. So, how do you do that?
Try increasing and decreasing the width of the browser, and you should see
the border flexibly adjust. The following lines of code are doing the heavy lifting
here (
border-image
is currently supported across all major browsers using vendor
prefixes, but I've omitted them here for brevity):
