CODEWITHSUNDEEP
htmlcss
Imamadmad
Imamadmad

Reputation: 77

border-image driving me crazy

It seems I must have read every article and guide to using border-image that there is on the web, and have tried just about every suggestion possible, yet it still isn't displaying! It's destined for a ul of class "navbox", and the full CSS for that element is below.

ul.navbar {
    float: right;
    list-style-type: none;
    background-color: #F8F8F8;
    border-style: solid;
    border-width: 4px;
    border-color: #231F20;
    color: #1F1F1F;
    margin: 25px 5px 5px 5px;
    height: 50px;
    position: absolute;
    left: 450px;
    right: 20px;
    vertical-align:middle;
    border-image-source: url(C:\Users\imamadmad\Documents\Web Stuff\Locomotion Coffee\border.png);
    border-image-outset:4px;
        border-image-width:4px;
    border-image-slice:8;
    border-image-repeat:repeat;
}

I feel I have tried every possible combination of the border-image property, and even used both a .png and a .jpg version of the file, yet nothing displays. I've even removed the other border styling completely, but replaced it when that didn't make the border-image appear as I still needed some sort of border! I'm not sure if it would have anything to do with the fact that I'm calling the entire document and all files associated with it through my computer rather than through the web, as I need to make a mock-up on my own computer before I can put it online. However, everything else, including other images, are displaying just fine. It is neither displaying in Chrome nor IE, and Firefox just doesn't want to show any CSS at all, so that's unhelpful. I have tried adding the -webkit- etc. tags to the properties, but they made no difference either and besides, it shouldn't need it for the latest version of Chrome, which I'm running.

Please, can anyone help me! While it's not vital to the design, it would really just make it that much easier on the eyes.

Upvotes: 0

Views: 78

Answers (1)

Richa
Richa

Reputation: 3289

Works fine. Check your image url

FIDDLE DEMO

ul {
    float: right;
    list-style-type: none;
    background-color: #F8F8F8;
    border-style: solid;
    border-width: 4px;
    border-color: #231F20;
    color: #1F1F1F;
    margin: 25px 5px 5px 5px;
    height: 50px;
    position: absolute;
    left: 450px;
    right: 20px;
    vertical-align:middle;
    border-image-source: url(http://i46.tinypic.com/10gljba.jpg);
    border-image-outset:2px;
    border-image-width:4px;
    border-image-slice:8;
    border-image-repeat:repeat;
}

Hope this is what you are looking for

Edit : FIDDLE Updated

Upvotes: 1

Related Questions