Border and Box Effects 105
border-image-width: 34px;
}
E, F {
border-image-slice: 34;
border-image-source: url('foo.png');
}
You can see how this compares in Figure 9-10: The element on the left
has a border of 34px on each side and no explicit border-image-width value,
so the text content starts inside the border as you’d expect; the element on
the right, however, has only a 1px border but a border-image-width value of
34px. Although the image slices are applied in the same way, the text con-
tent sits over the top of the “virtual” border in the element on the right.
Figure 9-10: Comparing a border-width value of 34px (left) with a border-image-width
value of 34px (right)
If you use a unitless number it acts as a multiplier of an existing border-
width value; in the following code, the border-image-width will be equivalent
to 20px:
E {
border-width: 10px;
border-image-width: 2;
}
border-image-outset
By default, a border image starts displaying from the outside of the border
box, moving in toward the content box; but you can change this default
behavior by outsetting the image to start from outside the border box. You
do this with the border-image-outset property, which takes (the by now cus-
tomary) four possible length values, one for each side. For example, to outset
the border image by 10px from the top and bottom and 5px from the left
and right, you use this rule:
E { border-image-outset: 15px 30px; }
