How to avoid double border from the multiple <li>

Question

How to avoid double border lines from the list style? Please see the following fiddle for clear picture. I want 1px width of each box but they are double when the come together.

http://jsfiddle.net/awaises/4SLPh/1/

HTML :

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS :

ul{
     margin:0; padding:0;
     list-style:none;
     }
ul li{
     width:30%; height:200px;
     border:1px solid black;
     float:left;
     }

Thanks

Answer 1

Try adding margin-right:-1px; margin-bottom:-1px;

Answer 2

It's a matter of applying borders to the ul & li selectively.

JSFiddle Demo

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul{
    margin:10px; padding:0;
    list-style:none;
    border-left:1px solid black;
    border-top:1px solid black;
    overflow:hidden;
}
ul li{
    width:33.3333%; height:200px;
    border-bottom:1px solid black;
    border-right:1px solid black;
    float:left;
}