CSS border-image not working in Chrome

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

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.

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;}