The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

104 Chapter 9

The default behavior of border images is to use only the slices and

corners on the border, leaving the center of the element blank for its own

background properties to be shown. The border-image-slice property has an

optional keyword value of fill, however; if the fill keyword is included, the

area of the image inside the slices will be applied over the background of

the element in the appropriate place.

E { border-image-slice: value fill; }

Figure 9-9 shows a comparison of an element with a border image, with

and without the fill keyword.

noTe Filling the element with border-image-slice means you have no control over the fill

sizing and can leave it quite distorted, so consider carefully if you want to use this

rather than background-image.

Figure 9-9: Left to right: the source image, applied as a border image, and with the fill

keyword value

border-image-width

As you saw in Figure 9-8, border image slices are stretched or condensed

to fit the width of the element’s border; for example, if the element has

a border that’s 10px wide but your slices are 40px wide, each slice will be

condensed to a quarter of its height or width in order to fit. You can control

this by using the border-image-width property:

E { border-image-width: value; }

Like border-width or border-image-slice, the value here can actually be up

to four values, to match the sides of the element, and each can be a length,

a percentage, or a unitless number.

The value creates a “virtual” border on the element, by which I mean it

has no impact on page layout or flow; unlike border-width, the border that

value creates is visual only and has no effect on the box model. To illustrate

the difference, take a look at this code:

E { border-width: 34px; }

F {

border-width: 1px;