How to collapse the borders of a set of div elements using CSS?
css, html
Solution
Could border collapse property help?
The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.
See: http://www.w3schools.com/cssref/pr_border-collapse.asp
table#myTable
{
border-collapse:collapse;
}
Problem
I have a grid made of divs with a fixed width and a border of 1px. Now where two divs touch each other, the border becomes 2px, obviously. How can I just get a 1px border in the whole grid? This is what I mean: http://jsfiddle.net/Before/4uPtj/ HTML: ``` <div class="gridcontainer"> <div class="griditem"></div> <!-- 15 more times --> </div> ``` CSS: ``` div.gridcontainer { width: 80px; line-height: 0; } div.griditem { display: inline-block; border: 1px solid black; width: 18px; height: 18px; } ```