ボーダー半径プロパティを追加すると境界線の色が変わります

Question

私はこれまでに尋ねられた同様の質問を見ており、これは同じではありませんでした。 私は、ホバー上に行の境界線を作成し、行の最初と最後のセルにそれぞれ左右の境界線を付けてCSSを追加しました。

マイHTML：

<table> 
    <tr><td>1111111</td><td>22222222</td><td>3333333333</td></tr> 
    <tr><td>4444444</td><td>55555555</td><td>6666666666</td></tr> 
    <tr><td>7777777</td><td>88888888</td><td>9999999999</td></tr> 
</table> 

マイCSS：

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; 
} 

しかし、国境半径を追加するには、両端軽い上のセルの境界線になります。 私はそれのためにJSFiddleを作成しましたBorder radius changes color

私は、最初と最後のセルの色を変更したChrome 55を使用していますが、上にしか表示されません。 Safari 10を使用すると、下枠と上枠の両方の色が変更されます。

Answer 1

に幅下の境界線を、このCSSコードを試してみてください1pxでの溝の使用。 2pxの溝または1pxの溝を使用すると、それを修正するように見えますが、まだ片側では少し外れています。それは意図的なのか、それとも不要なのでしょうか？

Answer 2

変更

table { 
border-collapse: seperate; 
border-spacing:0; 
} 
tr:hover td { 
    border-top: 1px groove #E8E8E8; 
    border-bottom: 2px 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: 2px groove #E8E8E8; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

悪化し、私は非常にわからないんだけど、いくつかのグラグラアンチエイリアシングのようだ右と2つのピクセル