Simulating border-collapse in lists (no tables)

css list border collapse
Enrique picture Enrique · Apr 21, 2011 · Viewed 43.3k times · Source

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

Frederick picture Frederick · Dec 7, 2011

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.

Related questions

How can change width of dropdown list?

I have a listbox and I want to decrease its width. Here is my code: <select name="wgtmsr" id="wgtmsr" style="width: 50px;"> <option value="kg">Kg</option> <option value="gm">Gm&…

Read More
Hide Show content-list with only CSS, no javascript used

I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I've managed to make this action: <!DOCTYPE html> <head> <style> #cont {display: …

Read More
li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

After proudly coloring my liststyle bullet without any image url or span tags, via: ul{ list-style: none; padding:0; margin:0; } li{ padding-left: 1em; text-indent: -1em; } li:before { content: "■"; padding-right:7px; } Although these stylesheets work perfectly down to the rounded borders …

Read More