Question

A table row has hover background. I need to get rounded corners on the background.

table tbody tr#ClickableRow:hover {
  background-color: #fbf6e7;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
}

<tr id="ClickableRow">
  <td>
    <a href="http://somesite.com">Go Here</a>
    <p>To find about all the interestng animals found in this tourist attractions including zebra, giraffe..... ....
    </p>
  </td>
</tr>

This is not working. I still get the squared bg.

Answer 1

Try applying the border radius on the td rather than the tr

body {
  margin: 100px;
}
table tbody tr#ClickableRow:hover td {
  background-color: #fbf6e7;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
}

<table>
  <tr id="ClickableRow">
    <td>
      <a href="http://somesite.com">Go Here</a>
      <p>To find about all the interestng animals found in this tourist attractions including zebra, giraffe..... ....
      </p>
    </td>
  </tr>
</table>

If your table row has more than one cell you can do this: http://jsfiddle.net/petersendidit/RzKbq/1/