creating a border image

Question

I am trying to create a border image for a wordpress site but the border is not displaying.

I have selected a random photo off of google to try it and it doesn't work.

Are there certain dimensions needed for it to display? Or what am I missing?

the image file has been placed in the same directory as the stylesheet

Answer 1 · 2015-02-18T04:58:54Z

February 18, 2015 4:58am

I can create borders but having trouble with border-image

code im using is border-image: url(imagename.png);

e.g.

<style>
div {
  border-image: url('wood-border.png');
  width: 40%;
  border: 2px solid black;
}
</style>
<div>
this is content
</div>

the solid black border appears, but the image border doesn't. Not sure if there is a problem with dimensions of image or I am missing something.

Answer 2 · 2015-02-18T04:33:24Z

February 18, 2015 4:33am

Can you please show me any live markup or code what you're trying ? May be in codepen.io ?

Though this is basic code which you can use to give image a border :

img {
    border: 5px solid red;
}

Answer 3 · 2015-02-18T05:05:03Z

February 18, 2015 5:05am

Well there're different things you need to check , like you've given a border width with color and style.

And border image is big enough or stretched so that you can see, here's the CSS syntax for border image :

border-image: source slice width outset repeat|initial|inherit;

Though for reference you can check this out :

Answer 4 · 2015-02-18T05:14:30Z

February 18, 2015 5:14am

Yeah I had already gone through that page. Problem is nothing is loading. It's probably something simple I am missing.

EDIT:

Ah thankyou Robert! I moved the border rule above the border image rule and it now works.

Welcome to the Treehouse Community