title: Top and bottom borders in table row: only bottom border is styled
body: <p>I'm using the following CSS to achieve a highlighting effect on the table row currently hovered: </p>
  
  <pre><code>#container table {
      border-collapse: collapse;
  }
  #container table td {
      border: 2px solid white;
  }
  #container table tr:hover td {
      border-top: 2px solid #999;
      border-bottom: 2px solid #999;
  }
  </code></pre>
  
  <p>On all but the top-most tbody row only the bottom border is styled with <code>#999</code>. The top row correctly shows two borders. It looks like the white bottom-border of the previous row covers the grey top-border of the hovered one (tested in FF 42). Is there a way to get this right? </p>
  
  <p><a href="https://jsfiddle.net/pythonpups/4g2w420o/" rel="nofollow">JSFiddle</a></p>