102 Chapter 9
border-image-source
The first property, border-image-source, sets the source of the image that will
be used for the border—but you probably guessed that. It takes a single
value, which is an image data type; for most browsers that’s only the url()
function. Here’s an example of border-image-source:E { border-image-source: url('foo.png'); }noTe This property should also accept gradient functions (see Chapter 11) as values, but
currently only Chrome and Firefox support that use.border-image-slice
Once you have the source of the image for the border, you need to slice it.
The border-image-slice property accepts between one and four values, each
of which maps to a side of an element, similar to margin, padding, border-
radius, and so on. These values are used to set a distance from each edge
of the image, marking the area used to “frame” the element.
I’m aware that’s probably a little confusing, so I’ll explain with an
example. Take a look at this code:E { border-image-slice: 34; }Note here that no units are used on the number value. The number
serves two purposes: for bitmap images (such as JPG or PNG), the units
are pixel values; but for vector images (such as SVG), they are coordinate
values. You could also use percentage values as an alternative.
In my example code, I provided only a single value, which sets the area
I want to slice: 34px from the top, right, bottom, and left. Take a look at
Figure 9-7, which shows how this value is used to divide the source image
into nine segments: four corners (c1, c2, and so on), four sides (known as
slices—slice1, slice2, and so on), and the central fill. Each of these slices will
be placed onto the border of a target element in the equivalent positions.
With the source image and slices defined, now I just have to set a bor-
der on the element to apply a border image. The image will be applied to
the area created by the border, so in the following code example, I define a
34px border on the top and bottom, and 10px on the left and right.E {
border: 34px 10px;
border-image-slice: 34;
border-image-source: url('foo.png');
}