CSS

EMMANUEL GENARD
EMMANUEL GENARD
3,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?

2 Answers

Ian Lunn
Ian Lunn
4,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.

Now, 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 border-image-width to 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.

EMMANUEL GENARD
EMMANUEL GENARD
3,790 Points

This explains it really well, thank you very much