CSS border-image not working in Chrome

Question

I have used CSS border-image to attain certain effect in the menu bar. Its working good in Firefox. But doesn't work in Chrome.

See www.imptools.com. Is there any workaround for chrome?

CSS

nav.mainMenu{
width:@16cols; height: 50px;
margin:0 auto; position: relative;
top:-25px;
ul{
    width:100%; height:50px; overflow: visible;
    background: url('../imgs/gun_metal.png');
    border-radius: 15px; box-shadow: 0px 3px 3px @dark;

    li{
        float:left; width: auto;
        margin: 0 20px; overflow: visible;
        height: 80px; position:relative; top:-15px;
        a{
            width: auto; height: auto;
            float:left; padding: 0 15px;
            font-family: @sansSec;
            color:@light;
            line-height: 80px;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 3px 3px 3px @dark;
        }
    }
    li.active, li:hover{
        background: @primary;
        border-radius: 15px 0 15px 15px;
        border-image:url(../imgs/menu_active_bg.png);   
        border-image-width:15px 15px 0px 0px;
        border-image-outset: 0px 15px;
    }
}

Answer 1

Try setting the border before setting the image like so

border: 50px solid transparent;

I have noticed that in Safari this statement doesn't matter but it does matter in chrome

Answer 2

According to chrome platform status,

Blink will begin to require a border style in order to paint border images. This has always been required by the spec, but has not been enforced. In order to not be affected by this change, add e.g. 'border-style: solid' where border-image is used.

so adding

border-style: solid;

should fix your issue.