border-image issue in CSS

Question

When I try to use border-image in my website to make our logo appear as the border, the image won't even show up on the page. It doesn't work in any browser that I try and the image is in the same folder. I know for sure that I'm modifying the correct div because when I add border-radius, the borders become rounded. I really have no idea what I am doing wrong, so I would appreciate any help. Here's the div in CSS:

#outer_container {
height: 1495px;
width: 925px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #E7EAF5;
border-style: solid;
border-width: 38px 0px 0px;
-moz-border-image: url(logo.gif) 81 0 repeat stretch;
-webkit-border-image: url(logo.gif) 81 0 repeat stretch;
-o-border-image: url(logo.gif) 81 0 repeat stretch;
border-image: url(logo.gif) 81 0 fill repeat stretch;
}

Answer 1

As seen here , according to W3 and Alex Rozanski:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardizing it to the CSS file means that the URLs will work wherever the Style Sheets are added.