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-
Figure 5-6 The border image is sliced with the border-image-slice property set to 4 .
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 ;
Search WWH ::

Custom Search