Wie reduziere ich die Ränder einer Reihe von div-Elementen mithilfe von CSS? ⇐ CSS

[Anonymous]

Ich habe ein Raster aus Divs mit einer festen Breite und einem Rand von 1 Pixel. Wenn sich nun zwei Divs berühren, wird der Rand offensichtlich 2 Pixel groß.
Wie kann ich nur einen 1 Pixel großen Rand im gesamten Raster erhalten?
Das meine ich:


http://jsfiddle.net/Before/4uPtj/
HTML:

Code: Select all

CSS:

Code: Select all

div.gridcontainer
{
width: 80px;
line-height: 0;
}

div.griditem
{
display: inline-block;
border: 1px solid black;
width: 18px;
height: 18px;
}