How collapse borders of list-items in adaptive

Question

Example jsfiddle: https://jsfiddle.net/bf4kncdh/1/

.top-nav is element which have list of elements which i want to borders collapse. In desktop i have menu items in 1 line, but in the adaptive they are lined up in several rows and the borders between the rows become thicker, and 1 element of the next row does not have a left border.

I need them to have all the borders on the sides, like the fact that they would be the same width, standing next to each other.

Is there any way to make boundaries like this, leaving the html markup the same?

Answer 1

I find best way to solve this problem. It based on outline and little margin 's properties to compensate double width border on neighbour list-items.

https://jsfiddle.net/bf4kncdh/2/

That's is solution.

.main-nav ul li {
  outline: 1px solid #fff;
  margin-top: 1px;
  margin-right: 1px;
}