Css border covering issue

Question

I have this css in my page

li
{
    border-right:8px solid #101212;
    border-bottom:8px solid #33B5E5;
}

After that by default borders are displayed in this way.

But in my case I want something like this (bottom line covered black one)

How can I achieve this without changing my html (because it's generating automatically).

Edit:

Also note, that my ul tag is multiline, so everything isn't in one line and I can't have a workaround with giving border-bottom to my ul tag.

I have this in my css.

ul
{
   width:270px;
}

li
{
   float: left;
   width:90px;
}

and in my html

<ul>
            <li><a href="listview/index.html"><div class="menu_item_img">&#xe0dc;</div>Editing </a></li>
            <li><a href="listview/detailbuttons.html"><div class="menu_item_img">&#xe0db;</div>Editing </a></li>
            <li><a href="listview/databinding.html"><div class="menu_item_img">&#xe0da;</div>Editing</a></li>
            <li><a href="listview/pull-to-refresh.html"><div class="menu_item_img">&#xe0de;</div>Editing</a></li>
            <li><a href="listview/endless-scrolling.html"><div class="menu_item_img">&#xe0df;</div>Editing</a></li>
            <li><a href="listview/pull-with-endless.html"><div class="menu_item_img">&#xe0cc;</div>Editing</a></li>
            <li><a href="listview/press-to-load-more.html"><div class="menu_item_img">&#xe0cd;</div>Editing</a></li>
            <li><a href="listview/fixedheaders.html"><div class="menu_item_img">&#xe0ca;</div>Editing</a></li>
            <li><a href="listview/templates.html"><div class="menu_item_img">&#xe0c9;</div>Editing</a></li>
</ul>

Answer 1

I have tried it. I solved this issues. You try this.

See the output

ul{
    border-bottom:solid 5px #33B5E5;
    height:50px;
    margin:0;
    padding:0;
}
ul li{
    float:left;
    list-style-type:none;
    border-right:solid 5px #101212;
    height:100px;
    padding:0 10px;
   line-height:50px;
    z-index:-1;
    position:relative;
}