CODEWITHSUNDEEP
csshtml
SunnyPenguin
SunnyPenguin

Reputation: 157

Adding border radius property changes color of the border

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.

My 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>

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

But adding the border radius makes the border for the cells on the ends lighter. I have created a JSFiddle for it at Border radius changes color

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.

Upvotes: 1

Views: 1745

Answers (2)

Geert van Dijk
Geert van Dijk

Reputation: 136

I'm not quite sure, but it seems to be some wonky anti-aliasing, worsened by the use of a groove at 1px. Using either a groove at 2px or a solid 1px seems to fix it, although it still lops off a bit on the sides. Is that intentional or also unwanted?

Upvotes: 1

Belgacem Ksiksi
Belgacem Ksiksi

Reputation: 282

try this css code

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

change the right and bottom borders width to 2 pixels

Upvotes: 0

Related Questions