title: CSS inset box shadow on table cell is mis-aligned
body: <p>So there's probably a simple answer to this, but I can't seem to get my CSS inset box shadow to work correctly on a table cell. I have the following CSS rules:</p>
  
  <pre><code>table { 
      border: 1px solid #aaa; 
  }
  table th, td { 
      width: 76px; 
      height: 50px; 
      vertical-align: middle; 
      text-align: center;
  }
  tr { 
      border: 1px solid #aaa; 
  }
  td.color {
      -moz-box-shadow:inset 0 0 10px 0 #222;
      -webkit-box-shadow:inset 0 0 10px 0 #222;
      box-shadow:inset 0 0 10px 0 #222;
      border: 1px solid #000;
  }
  td.red { ... }
  td.green { ... }
  </code></pre>
  
  <p>So I'm trying to add classes <code>.color</code> and  <code>.red</code>, <code>.green</code>, etc. to certain cells with the inset shadow to have them look indented in the table row. For some reason, the inset shadow is mis-aligned by 1px. </p>
  
  <p>I posted an image of the problem here:</p>
  
  <p><img src="https://i.stack.imgur.com/yQdS0.png" alt="enter image description here"></p>
  
  <p>Resulting in the bottom and right edges having 1px of background showing through.</p>
  
  <p>Any ideas? Thanks!</p>
  
  <p>-Nate</p>