CODEWITHSUNDEEP
cssgoogle-chrome
Abel D
Abel D

Reputation: 1080

CSS border-image not working in Chrome

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

enter image description here

Upvotes: 10

Views: 9574

Answers (4)

qwazix
qwazix

Reputation: 976

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.

Upvotes: 12

Dante
Dante

Reputation: 161

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

Upvotes: 16

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

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

Upvotes: 1

mstrthealias
mstrthealias

Reputation: 2921

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

Upvotes: 1

Related Questions