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

CSS

Posted by nam le
nam le
2,509 Points

A question about border-image-slice

Hi everybody, Today when I am watching the video: Border-image. I don't understand what does border-image-slice work? I have read extra information on the internet but i still don't understand it. Eg: .box { border: 12px double #70979A; border-image-source: url('border.png'); border-image-slice: 30% 20%; } Firstly, I know 30% and 20% of image. but when i change it to 40% 50%, for instance; the result make me confuse. Play with more value of percentage make me more confuse. So anyone can explain it more detail. Sorry for my english. It's not my first language. Thank you so much

1 Answer

Thomas MacFarlane
Thomas MacFarlane
2,430 Points
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Play around with http://border-image.com to quickly grasp the concept

border-image-slice accepts 4 values, the top offset, right offset, bottom offset and left offset. Changing these values will affect how the image is sliced into 9 pieces as you can see on that website.

The 4 corners will always be placed just once in the corresponding 4 corners, whereas the 4 sides are stretched or repeated as desired to fill the remaining space around the border. And of course the centre can be included if desired.

nam le
nam le
2,509 Points

Thank you so much, Thomas

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

You're welcome! :) A simple upvote would be appreciated too. :)

nam le
nam le
2,509 Points

Hi Thomas, So what about border-image-width. I mean when set border-image-width with percentage value. So the percentage value relative to what? With example in Background & Borders -> Borders images. you can give me exactly the result of percentage value by pixel. (15% = ? pixel) or you can give me with your own example. Please help me. Thank you so much

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

I'm a little unsure of how this all fits together, but this is a page I found with Google that seems to explain it pretty well - https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width