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 Daniel Ashton
Daniel Ashton
3,282 Points

CSS3 Border-image tutorial?

Hi Treehouse

I've always struggled to get to grips with the new CSS3 border-image property. I've been looking through the library and can't find anything relating to the technique.

http://www.w3schools.com/cssref/css3_pr_border-image.asp

Is there a tutorial or deepdive available on the subject?

Many thanks Dan

3 Answers

Travis Bennett
Travis Bennett
6,410 Points
Travis Bennett
Travis Bennett
6,410 Points

The css foundations deep dive covers this topic in depth (under backgrounds and borders) my friend. It's probably some of the most in-depth coverage of this topic that I've ever seen.

Daniel Ashton
Daniel Ashton
3,282 Points
Daniel Ashton
Daniel Ashton
3,282 Points

Thanks Travis

Exactly what I was looking for, just used it on a stage site and it works a charm!

Eleeza Amin
Eleeza Amin
34,496 Points
Eleeza Amin
Eleeza Amin
34,496 Points

Hi, Daniel! The first thing you need to do is to make sure that your browser supports support border-image. (You can use Internet Explorer 11, or the most recent version of your chosen browser).

Next, you need to specify the image you want as a border, using its url()

Finally, you need to specify the width, height and if you want to stretch, or repeat ( use round) the image that you're using for the border.

border-image: url(/* Image url */) 30 40 stretch;

The first number (30) refers to the width The second number (40) refers to the height

When you are done, your syntax should look something like this: -webkit-border-image:url(/* Image url */) 30 40 /*styling the image*/; /* Safari 5 */ -o-border-image:url(/* Image url */) 30 40 /*styling the image*/; /* Opera */

I hope this will help you.