EMMANUEL GENARD3,790 Points
border-image-slice vs - border-image-width
It seems from the W3C that border-image-slice and border-image-width do the same thing. The values of both properties sets the inward offset of the border-image. From the W3 specification on border-image-width:
The four values of ‘border-image-width’ specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively.
From the W3 specification on border-image-slice:
This property specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle.
This seems to be the same thing to me, am I missing something?
Ian Lunn4,073 Points
I remember reading that myself when I wrote CSS3 Foundations and it confused me too! I believe the issue is with the description of 'border-image-width'.
border-image-slice determines the 9 regions where your image will be sliced. Let's say you use
border-image-slice: 4, you'll have 9 pieces of an image, each of 4px in width (assuming its a raster image).
border-image-slice won't have any visual impact on its own, it just tells the browser how to slice your image.
border-image-width tells the browser how wide you would like each of those sliced images to be. If you don't specify a
border-image-width, it's default value of
1 will be applied. Meaning the width will be the same as the slice width,
4px. However, if you set the
1px, each slice will be reduced down from 4px to 1px.
If you specified
border-image-width: 1 2, then the slices on the top and bottom borders would be 4px, and the left and right would be 8px.
So, really, they almost do the same thing, but think of
border-image-slice as you telling the browser how to cut the image up, then
border-image-width is how to display those slices on screen.
All that said, I've never used
border-image-width in production as the default value of
1 is always enough. I'd create a thicker border in the graphic file and increase the slice values rather than manipulate the width.