How add another border.

Okay, I have a much better solution worked out.

I'd use the pseudo class :after to accomplish your goal. I also did a little bit of refactoring your CSS. By giving every list item a border left, and border right, and than removing the border left on the first list item, and adding the border right on the last list item, this will allow your list item, or navigation to grow. Whether you had 3 or 30 list items, they would all get the correct borders, without adding more code. As you had it, for every list item, it needed it's own CSS selector.

Here is the full link http://codepen.io/kevink/pen/yhxpA

I left your HTML untouched. You still have some issues if this is going to be responsive to fix.

Basically, these are the big changes.

As you can see, we gave each list item and left and right border. I also had to set the position to relative, so later on our absolutely positioned after pseudo element will position it's self to the list items.

#navbar ul li {
  padding: 24px 3em; 
  display: inline; 
  margin:-2px;
  border-right: 1px solid green;
  border-left: 1px solid red;
  position: relative;
}

Next, we had to go back and remove the border from the first list item. Easy peasy.

#navbar ul li:first-child {
  border-left: none;
}

Now the bread and butter. We create an after pseudo element on the last child. We position it absolutely, which will position itself relative to a parent with position relative. Remember how we set position relative earlier. This is why. Zeroing out the top, bottom, left, and right stretches our this pseudo element to be the same height and width of the list items. Now we can put a border on this element, but based on the CSS box model, borders go outside of the box model. We need this border to go on the outside, so we have to give it a right of -2px. This will push it to clear the 1px green border, and than give it enough room for itself as a 1px border.

#navbar ul li:last-child:after {
  content: "";
  border-right: 1px solid red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -2px;
}

This leaves us with no extra markup, which is just what we wanted. Hope that helps to answer your question.