Simulating border-collapse in lists (no tables)

Question

I have always the same problem, when I have 2 adjacent elements with borders, the borders are merged. With tables we have the border-collapse property for solving this.

Answer 1

This thread is pretty old, but I found a new solution using the outline property. It works for vertical and horizontal lists, even if the horizontal list is multiple lines long.

Use a border of half the intended width, and add an outline also of half the intended width.

ul {
  list-style-type: none;
  width: 100px;
  margin: 0;
  /* also set the parent's padding to half of the intended border's width to prevent the outlines from overlapping anything they shouldn't overlap */
  padding: 0.5px;
}
li {
  display: inline-block;
  float: left;
  box-sizing: border-box;
  text-align: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;

  /* simulates a 1px-wide border */
  border: 0.5px solid black;
  outline: 0.5px solid black;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8