CSS border-image not working in Chrome - css

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.

Answer 3

li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
-webkit-border-radius: 15px 0 15px 15px;
-moz-border-radius: 15px 0 15px 15px;
-khtml-border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
-webkit-border-image:url(../imgs/menu_active_bg.png);
-moz-border-image:url(../imgs/menu_active_bg.png);
-khtml-border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
-webkit-border-image-width:15px 15px 0px 0px;
-moz-border-image-width:15px 15px 0px 0px;
-khtml-border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
-webkit-border-image-outset: 0px 15px;
-moz-border-image-outset: 0px 15px;
-khtml-border-image-outset: 0px 15px;
}

Answer 4

Try it like below.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
-webkit-border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
}