Question

I have a table row with two cells and the row has hover background color I am trying to to round the corners of hover background color using border radius like this:

table tbody tr#ClickableRow:hover td
    {
        background-color: #fbf6e7;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px;
        border-radius: 4px;
        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 etc
</p>
    </td>

<td>Call us:444-444-2322</td>
</tr>

Its breaking right at the cell border. How can this be resolved? I can’t select row itself and apply the radius..

Answer 1

Put a DIV inside the TD, add your content in the DIV. Apply the borders to the DIV instead of the TD.