HTML and CSS Reference
states between browsers at the moment. Google Chrome has good support, Firefox partial, Internet Explorer versions
6-9 have no support at all, and other modern browsers support only the shorthand property border-image .
Because border image is another visual style, it doesn't particularly matter that Internet Explorer doesn't show a bor-
der image. Let's look at the longhand properties for border images and then convert them to shorthand so the style
works in the majority of browsers.
Initial value: none | Inherited: No | Applies to: All, except internal table elements when border-collapse is
collapse | CSS3
Unprefixed browser support: Firefox 15+, Chrome 15+
border-image-source enables you to specify an image to use for the border by using a url() function with a
path to the image (the source) as an argument. You take a closer look at the url() function and its arguments in the
background-image definition shortly.
Figure 5-5 shows the custom border to be used on the Cool Shoes & Socks website. Although you apply it only to
the top border of the footer section, the image to be used should still consist of four sides.
Figure 5-5 The image to be used for the border of the newsletter box.
1. In styles.css, below the other declarations in the #footer rule set, add the following:
2. Save styles.css.
As you saw with the other border declarations, it takes a few of them to work together before you get a result.
Initial value: 100% | Inherited: No | Applies to: All, except internal table elements when border-collapse is
collapse | CSS3
Unprefixed browser support: Chrome 15+
When the browser knows which image you want to use, it slices it into nine parts; four corners, four edges, and one
center piece. How that slicing occurs depends on the border-image-slice property.
1. In styles.css, below the border-image-source declaration, add the following: