html - css merge box shadows -

i want make horizontal navigation bar unordered list , list items represent elements of bar :

i used width of 25% each element fit in bar , box-shadow create border around each list item because if decided use border, elements not fit inside bar :

#bar {    margin: auto;    width: 50%;    height: 30px;    padding: 0;    background: lightgrey;    text-align: center;  }  .foo {    line-height: 30px;    float: left;    width: 25%;    list-style: none;    box-shadow: 0 0 0 1pt black;  }

<ul id="bar">    <li class="foo">foo 1</li>    <li class="foo">foo 2</li>    <li class="foo">foo 3</li>    <li class="foo">foo 4</li>  </ul>

however, because there 2 shadows between each element, shadow 2 times thicker between them.

is there way somehow merge shadows ?

i tried border-collapse: collapse didn't change thing. avoid using outline because want style menu further.

how this? use box-sizing: border-box; , borders won't affect width.

fiddle here

* {   box-sizing: border-box; }  #bar {   margin: auto;   width: 50%;   height: 30px;   padding: 0;   background: lightgrey;   text-align: center; }  .foo {   line-height: 30px;   float: left;   width: 25%;   list-style: none;   /* box-shadow: 0 0 0 1pt black; */   border-top: 1px black solid;   border-left:1px black solid;   border-bottom: 1px black solid; }  .foo:last-child {   border-right: 1px black solid; }