title: CSS Borders - outlining a group of DIVs neatly
body: <p>I'm having a 'blonde moment' here - I'm sure this is easy but I can't seem to figure it out.</p>
  
  <p>I have a grid of DIVs (10 rows which are CLEAR:BOTH - each with 10 FLOAT:LEFT DIVs of a fixed size).</p>
  
  <p>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.</p>
  
  <p>See this for an example</p>
  
  <p><img src="https://i.stack.imgur.com/qnUzx.jpg" alt="http://dl.dropbox.com/u/1164739/cssborder.jpg"></p>
  
  <p>Am I missing an obvious trick to just make that a solid box rather than the 'dotted line' effect the corners are creating??</p>
  
  <p>To clarify my CSS - the rows have this class</p>
  
  <pre><code>.row {
    clear: both;
  }
  </code></pre>
  
  <p>and the cells have this class</p>
  
  <pre><code>.cell {
    float: left;
    border: 5px solid transparent;
  }
  </code></pre>
  
  <p>as well as between 0 and 4 classes like this one</p>
  
  <pre><code>.top { // repeated for bottom, left and right ofc.
    border-top: 5px solid black;
  }
  </code></pre>