How To Fix border-image in your CSS?

I have already explained this in the context of Gmail, but I thought we should make it more explicit.

If you go on Music Oricon Japanese Web site with Firefox Android with about:config?filter=prefixes.webkit set to false, you will see massive breakages, including this navigation bar:

Oricon navigation bar in Firefox

There are a couple issues including flexbox, but let's ignore it for the moment and let's focus on background-image issues. The markup is simple.

<ul class="btn-navi">
        <li class="current"><a href="http://music.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">J-POP</a></li>
        <li><a href="http://music-world.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">洋楽</a></li>
        <li><a href="http://music-club.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">クラブ</a></li>
        <li><a href="http://music-indies.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~"><span class="nowrap">イン</span><wbr><span class="nowrap">ディーズ</span></a></li>
        <li><a href="http://music-anime.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">アニメ</a></li>
    </ul>

Let's see the CSS for each a href

.btn-navi > li.current > a {
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_current.png) 0 10 0 10;
    -moz-border-image: url(image/background_btn_current.png) 0 10 0 10;
}

The author had good intents. -webkit- and -moz- are there. -ms- is not present but it's normal, IE never had a support for border-image with prefix.

Missing the Non-Prefixed Version

Always add the non-prefixed version in the last position. Two main reasons:

Managing the legacy. Your client might not give you a budget to maintain the CSS in the future. So better be ready and universal for other browsers coming along.
Helping browsers implementers to unship the support of the prefix. Less things to maintain. Moving forward.

Let's see what is happening if we add border-image.

.btn-navi > li.current > a {
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_current.png) 0 10 0 10;
    border-image: url(image/background_btn_current.png) 0 10 0 10;
}

It's taken into account

Devtools CSS properties

Missing `fill` keyword

Always add the fill keyword to your border-image if it's the intended effect.

.btn-navi > li.current > a {
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_current.png) 0 10 0 10;
    -moz-border-image: url(image/background_btn_current.png) 0 10 0 10;
    border-image: url(image/background_btn_current.png) 0 10 0 10 fill;
}

Now it looks already better.

navbar half fixed

But we just fixed the selected one. We do the same for the others.

.btn-navi > li > a {
    display: table-cell;
    vertical-align: middle;
    height: 36px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    line-height: 1em;
    text-decoration: none;
    text-shadow: 0px 2px 1px #FFF;
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_normal.png) 0 10 0 10;
    -moz-border-image: url(image/background_btn_normal.png) 0 10 0 10;
    border-image: url(image/background_btn_normal.png) 0 10 0 10 fill;
}

And this time this is fixed!

navbar fixed

Simple no?

`border-image`

border-image is defined in CSS Backgrounds specification.
need the keyword fill at the end of the declaration. The ‘fill’ keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)
border-style needs to be defined.

Ice On the Cake: flexbox

The issue is classical and simple.

.btn-navi {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    width: 100%;
    list-style: none;
    margin: 8px 0;
    padding: 0;
}