Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
EMMANUEL GENARD
3,790 Pointsborder-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
4,558 PointsI 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
3,790 PointsThis explains it really well, thank you very much