title: Adding border radius property changes color of the border
body: <p>I have looked at similar questions asked before and did not find this to be the same.
  I wanted to create row border on hover and added css with left and right borders for the first and last cells in the row respectively.</p>
  
  <p>My HTML: </p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;&lt;td&gt;1111111&lt;/td&gt;&lt;td&gt;22222222&lt;/td&gt;&lt;td&gt;3333333333&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;4444444&lt;/td&gt;&lt;td&gt;55555555&lt;/td&gt;&lt;td&gt;6666666666&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;7777777&lt;/td&gt;&lt;td&gt;88888888&lt;/td&gt;&lt;td&gt;9999999999&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>table {
    border-collapse: seperate; 
    border-spacing:0;
  }
  tr:hover td {
    border-top: 1px groove #E8E8E8;
    border-bottom: 1px groove #E8E8E8;
  }
  tr:hover td:first-child {
    border-left: 1px groove #E8E8E8;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  tr:hover td:last-child {
    border-right: 1px groove #E8E8E8;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  </code></pre>
  
  <p>But adding the border radius makes the border for the cells on the ends lighter.
  I have created a JSFiddle for it at <a href="https://jsfiddle.net/qtmqf0gw/8/" rel="nofollow noreferrer">Border radius changes color</a></p>
  
  <p>I have been using Chrome 55 which changed the color for the first and last cells, but only on top.  Using Safari 10 changes the color for both bottom and top borders.</p>