Question

I’m having a ‘blonde moment’ here – I’m sure this is easy but I can’t seem to figure it out.

I have a grid of DIVs (10 rows which are CLEAR:BOTH – each with 10 FLOAT:LEFT DIVs of a fixed size).

What I want to do is assign a border to a group of these and this works (with the non-bordered sides/cells having a transparent border to keep everything aligned) BUT the way individual borders work, the ‘corners’ leave an ugly effect.

See this for an example

Am I missing an obvious trick to just make that a solid box rather than the ‘dotted line’ effect the corners are creating??

To clarify my CSS – the rows have this class

.row {
  clear: both;
}

and the cells have this class

.cell {
  float: left;
  border: 5px solid transparent;
}

as well as between 0 and 4 classes like this one

.top { // repeated for bottom, left and right ofc.
  border-top: 5px solid black;
}

Answer 1

Compare this:

div {
    border: 3px solid white;
    border-right: 3px solid black;
}

To this:

div {
    border: none;
    border-right: 3px solid black;
}

EDIT

The accepted solution was to make the padding take the place of the border, which would make the borders squared off. See:

http://jsfiddle.net/kCd7s/2/