li添加边框border ,border合并问题

                  

       图一 出现边框重合的问题                                     图二 需要达到的目的，让中间边框合并

问题：ul有多个li，每个li有1像素的边框，那么中间会出现边框重合的问题，废话不多说，直接看下面如何解决边框重合

html

<ul class="lifl clearfix">
    <li class="item">
        //do something
    </li>
    <li class="item">
        //do something
    </li>
    <li class="item">
        //do something
    </li>
                    
</ul>

css

.item{
    width: 200px;
    height:200px;
    border: 1px solid #f4f4f4;
    /*边框合并*/
    margin:0 0 -1px -1px;
    position: relative; 
    z-index: 0;
}

.item:hover{
    border-color: #FF5000;
    z-index: 1;
}

这里的margin 是margin-bottom和margin-left 为-1，也可以是margin-top和margin-right为-1