HTML and CSS Reference
In-Depth Information
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.
border-image-source
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:
border-image-source: url(“../images/bdr-footer.png”);
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.
border-image-slice
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:
