Css merge shadow box

Question

I want to make a horizontal navigation bar with an unordered list and list items that represent panel items:

I used 25% width for each item so that they fit exactly in the panel and window shadow to create a border around each list item, because if I decided to use a border, the items would not fit inside the panel:

#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>

Run code

However, since there are two shadows between each element, I get a shadow twice as thick between them.

Is there any way to merge these shadows somehow?

I tried crash-crash: fell off, but that didn’t change anything. I would also like to avoid using an outline because I want to further style this menu.

Answer 1

?   box-sizing: border-box;, .

* {
  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;
}

Answer 2

- , , , , , ( )

.foo , .

, ,

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

.foo:nth-child(n+2) {
  box-shadow: -1pt 0 0 0  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>