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

Little late to this party, but here's how to get a list item's complete border to change on hover.

First, just use (top and side) borders on the li elements, then give the last one a bottom border.

li:last-child {border-bottom:2px solid silver;}

Then, choose a hover border style:

li:hover {border-color:#0cf;}

Finally, use a sibling selector to change the next item's top border to match your hover item's hover border.

li:hover + li {border-top-color:#0cf;}

http://jsfiddle.net/8umrq46g/

Answer 2

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

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Answer 3

You can do this using CSS pseudo selectors:

li {
    border: 1px solid #000;
    border-right: none;
}

li:last-child {
    border-right: 1px solid #000;
}

This will clear the right hand border on all li elements except the last one in the list.

Answer 4

Old thread, but I found another solution, and more important:

YOU DON'T HAVE TO KNOW WHICH IS THE PARENT ELEMENT

li{
  border: 2px solid gray;
}

li + li{
  border-top: none;
}

/* Makeup */ li{width: 12rem;list-style: none;padding: .5rem 1rem;}

<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>

Answer 5

Give the elements margins. For example,

HTML:

<ul>
    <li>Stuff</li>
    <li>Other Stuff</li>
<ul>

CSS:

li { border: 1px solid #000; margin: 5px 0; }

jsfiddle example

Answer 6

Here's how I solved it: add a margin-left/-top of -1px to each li element. Then the borders really collapse without any tricks.