border-image property doesn't display border

Question

I've followed the example off of W3Schools here

HTML:

<h2 class="underline_red">Design</h2>

CSS:

.underline_red {
    border-image: url(../images/underline_red.jpg) 30 30 stretch;
    border: 15px solid transparent;
}

I've also included all the vendor prefixes even though the latest Chrome interprets it just fine.

I don't get any console errors, so my file is located and loaded no problem.

Unlike the example on W3Schools though, I'm not getting any border-image.

I'm obviously missing something

I've noticed the example on W3Schools doesn't use pixel sizes, I tried adding them but it didn't help.

Answer 1

Flip the order of your styles:

.underline_red {
    border: 15px solid transparent;
    border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 round;
}