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.

I've tried omiting the border from one of the sides, but that works only for elements in the middle, the first and final element will miss a border.

Does somebody know a solution for list elements for example?

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

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 3

You can add a left and bottom border to the ul and drop it from the li.

fiddle: http://jsfiddle.net/TELK7/

html:

<ul>
    <li>one</li>
    <li>two</li>
</ul>

css:

ul{
    border: 0 solid silver;
    border-width: 0 0 1px 1px;
}
li{
    border: 0 solid silver;
    border-width: 1px 1px 0 0;
    padding:.5em;
}

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

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 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.