HTML and CSS Reference
In-Depth Information
border-image-slice: 4;
2.
Save styles.css.
The
border-image-slice
property can be given up to four number values. Here,
border-image-slice:
4;
is the same as
border-image-slice: 4 4 4 4;
, the first value being the top and then working clock-
wise from there.
Note that unless using percentage values, the
border-image-slice
value should not be given a unit identifier
(such as px). This is because the values represent pixels when using a raster image and co-ordinates when using a
vector image (a file ending with a .
svg
extension).
As shown in Figure 5-6, a
border-image-slice
of
4
will slice the raster image 4px from the edge of the im-
age.
Figure 5-6
The border image is sliced with the border-image-slice property set to
4
.
border-image-width
Initial value:
1
| Inherited: No | Applies to: All, except internal table elements when
border-collapse is col-
lapse
| CSS3
Unprefixed browser support: Firefox 13+, Chrome 15+
border-image-width
determines the width of the image applied to the border.
In most cases, you don't need to specify a
border-image-width
because its initial value of
1
along with the use
of the
border-width
property is usually adequate. The border already has a width of
4px
, which you specified
on the
#footer
element earlier, like so:
#footer {
background-color: #ccc;
background-image: url(“../images/bg-footer.jpg”);
border-top: #999 dotted
4px
;
}
