Removing border separation in navigation bar elements

Question

I've built a simple center aligned navigation bar for my website. However, the borders of the elements in the navigation bar aren't perfectly overlapping, giving a disjointed look. Here's what I mean:

Notice the double-borders for each link. Note that even I remove one of the borders, the hover effect still reveals the imperfection:

How can I fix this via creating borders that perfectly overlap?

---

Here's the code:

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
    }

    ul.navbar li {
        margin: auto;
        display: inline-block;
        border-right: 1px solid #ffb366;
        border-left: 1px solid #ffb366;
    }


    ul.navbar li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-decoration: none;
    }

    ul.navbar li a:hover {
        background-color: #e67300;
    }

<ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#"><b>New Account</b></a></li>
    <li><a href="#">Old Account</a></li>
</ul>

Answer 1

Add only border-left to all li items. And for the last one add border-right as well

ul.navbar li {
    margin: auto;
    display: inline;
    border-left: 1px solid #ffb366;
}

ul.navbar li:last-child, ul.navbar li:hover{
     border-right: 1px solid #ffb366;
}

Update: The issue was in the font-size of the ul

ul.navbar {
    margin: 0;
    padding: 0;
    background-color: #ff9933;
    text-align: center;
    font-size: 0;
}

ul.navbar li {
    margin: 0;
    font-size: 14px;
    padding:0;
    display: inline-block;
    border-left: 1px solid #ffb366;
    border-right: 1px solid #ffb366;
    width:auto;
}

Plnkr: https://plnkr.co/edit/8j5It4jlrZRgTMxsArAu?p=preview

Answer 2

If you set both the li and the a element's display value to inline-block it will fix the issue you have:

/* navigation bar*/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
}

ul.navbar li {
    margin: auto;
    display: inline-block;
    border-right: 1px solid #ffb366;
    border-left: 1px solid #ffb366;
}

ul.navbar li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

ul.navbar li a:hover {
    background-color: #e67300;
}

<ul class="navbar">
  <li>
    <a href="#">Link 1</a>
  </li><li>
    <a href="#">Link 2</a>
  </li><li>
    <a href="#">Link 3</a>
  </li><li>
    <a href="#">Link 4</a>
  </li>
</ul>

This will also allow you to hover the entire item in the menu (and not only part of it).

Another option

(without changing the HTML structure) is to change the font-size of the ul element (and set font-size to the li):

l.navbar {
    font-size: 1px;
}

ul.navbar li {
    font-size: 14px;
}

Working example:

/* navigation bar*/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size: 1px;
    text-align: center;
}

ul.navbar li {
    margin: auto;
    display: inline-block;
    border-right: 1px solid #ffb366;
    border-left: 1px solid #ffb366;
    font-size: 14px;
}

ul.navbar li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

ul.navbar li a:hover {
    background-color: #e67300;
}

<ul class="navbar">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
  <li>
    <a href="#">Link 4</a>
  </li>
</ul>

Answer 3

Well, inline-block elements have a some surrounding 'space', by default:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
    }

    ul.navbar li {
        margin: auto;
        display: inline-block;
        border-right: 1px solid #ffb366;
          box-sizing:border-box;
          margin-left:-4px;
     
    }
ul.navbar li:first-child {
   border-left: 1px solid #ffb366;
}

    ul.navbar li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-decoration: none;
        box-sizing:border-box;
    }

    ul.navbar li a:hover {
        background-color: #e67300;
    }

<ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#"><b>New Account</b></a></li>
    <li><a href="#">Old Account</a></li>
</ul>

Also, keep just right border, and place left border to first li....