title: border-color change in table cells
body: <p>I have a very simple HTML table like below:</p>
  
  <pre><code>&lt;table&gt;
   &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;3&lt;/td&gt;
      &lt;/tr&gt;&lt;!-- Table Row --&gt;
      &lt;tr&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;6&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>that I want when I hover on each of the cells, the borders of the cell could change color. So I wrote the following CSS trying to achieve the effect:</p>
  
  <pre><code>table{
  position: absolute;
  
  font-family:Arial, Helvetica, sans-serif;
  color:white;
  font-size:12px;
  border:white 1px solid;
  
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  
  -moz-box-shadow: 0 1px 2px #d1d1d1;
  -webkit-box-shadow: 0 1px 2px #d1d1d1;
  box-shadow: 0 1px 2px #d1d1d1;
  
  width: 100%;
  height: 100%%;
  }
  
  table tr {
  text-align: center;
  padding-left:20px;
  }
  
  table td {
  padding:18px;
  border-top: 1px solid #ffffff;
  border-bottom:1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  width: 33%;
  height: 50%;
  background-color: black;
  }
  
  table td:hover{
    border:blue 1px solid;
  }
  </code></pre>
  
  <p>This code works, but not perfectly. It works great when I hover on the cells 1, 2, 3 (as numbered in the html), BUT when I hover, for example, on cell 4 5 6, the <b>top border</b> of the cell is not showing blue. I think the top borders of them are overlayed by the bottom borders of the cells above.</p>
  
  <p>Is there a work around to this issue?</p>