JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr id="ClickableRow">
    <td class="border-left">
<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>
        <td> middle cell</td>
        <td class="border-right">other cell</td>
</tr>

</table>

CSS

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