custom Bootstrap 3 nav-pills not work

I custom nav-pills for change background in default,hover and focus Like this :

.nav-pills > li > a {
    background:#FFF;
    border-radius:0;
    color: #777;
    border-right:5px solid #DDD;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    background:#f7f7f7;
    border-radius:0;
    color: #777;
    border-right:5px solid #005090;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

But in action border-right not true work and not show in 5 pixel. how do fix this ?

DEMO : http://ift.tt/1VYYQBJ

via Chebli Mohamed