CSS Borders - outlining a group of DIVs neatly - css

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/

Answer 2

If you put a border on the entire square, this is how border behaves. If you want to avoid this you should give the boxes with a black border dimensions on the sides not having a border equal to the width of the border, so add border: none first, then add dimensions, like if normal height is 20 and border is 5, and you want a border on the right, you would set: height: 30; width: 25; border-right: 5px solid;

Answer 3

Or try this way:
.top::before,
.bottom::before,
.left::after,
.right::after {
content: ".";
width: 100%;
height: 100%;
background: black;
display: block;
font-size: 0;
position: absolute;
}
.top::before {
height: 5px;
}
.bottom::before {
height: 5px;
top: 35px;
}
.left::after {
width: 5px;
}
.right::after {
width: 5px;
left: 35px;
}