10

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

4 Answers 4

16

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

3
  • Yep, Chrome 51 fixed a bug here: chromestatus.com/feature/5542503914668032
    – Rick Byers
    Jul 7, 2016 at 0:48
  • 1
    This fixed it for me - over two years later! Thanks! Dec 9, 2018 at 14:29
  • 1
    This actually breaks border-image in Safari for me. Apparently border-color: transparent; takes priority over border-image-source. But setting border: 50px solid before border-image-source seems to work nicely for both Safari and Chrome.
    – Jacob Ford
    Aug 4, 2020 at 20:21
12

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.

1
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;
}
5
  • this webkit work only for border-radius. But I need for border image. compare the menu in firefox and chorme for difference.
    – Abel D
    Aug 25, 2014 at 6:01
  • Looks like "-webkit-border-image" also might exist, I added it to the answer. Aug 25, 2014 at 6:04
  • Try adding -webkit-appearance: none; Aug 25, 2014 at 6:13
  • -webkit-border-image-width: and -webkit-border-image-outset: is not recognized by chrome
    – Abel D
    Aug 25, 2014 at 6:21
  • look at question I have added the image. Thats how i need it.
    – Abel D
    Aug 25, 2014 at 6:51
1

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;
}
4
  • same result, no change.
    – Abel D
    Aug 25, 2014 at 6:43
  • 1
    i checked in your site via chrome dev tools and it shows fine. Not sure where you are checking. Aug 25, 2014 at 6:45
  • I am checking it locally. I'll try it again.
    – Abel D
    Aug 25, 2014 at 6:46
  • look at question I have added the image. Thats how i need it.
    – Abel D
    Aug 25, 2014 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.