table border radius not match hover background-colour

Question

enter image description here

when i hover the background-colour comes out of the table border radius the corner of table bleed out when i hover coursor on it you can check on it

 table, td, th {border: 1px solid; text-align: center; padding: 15px; font-family:'League Gothic', sans-serif; font-size:25px; colour:green;} th, td {border-style: groove; border-color: #96D4D4;} td:hover {background-color: #5eff67; } table { border-collapse:collapse; background-color:#77fc7e; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td{ border: 1px solid #ccc; transition: background-color 0.5s }

 <table border="1" > <tr> <td><a href=#smile >smile section</a><br></td> <td><a href=#exercise >physical activity</a><br></td> <td><a href=#sleep > sleeping habit </a><br></td> <td><a href=#eating> eating </a><br></td> </tr> <tr> <td><a href=#grateful> greatful </a> </td> <td><a href=#providing> providing </a> </td> <td><a href=#breathe>breadth </a> </td> <td><a href=#acknowledgement> acknowledgement </a> </td> </tr> </table>

Answer 1

Just add table { overflow: hidden; } table { overflow: hidden; } to the CSS

 table, td, th { border: 1px solid; text-align: center; padding: 15px; font-family: 'League Gothic', sans-serif; font-size: 25px; colour: green; overflow: hidden; } th, td { border-style: groove; border-color: #96D4D4; } td:hover { background-color: #5eff67; } table { border-collapse: collapse; background-color: #77fc7e; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td { border: 1px solid #ccc; transition: background-color 0.5s }

 <table border="1"> <tr> <td><a href=#smile>smile section</a><br></td> <td><a href=#exercise>physical activity</a><br></td> <td><a href=#sleep> sleeping habit </a><br></td> <td><a href=#eating> eating </a><br></td> </tr> <tr> <td><a href=#grateful> greatful </a> </td> <td><a href=#providing> providing </a> </td> <td><a href=#breathe>breadth </a> </td> <td><a href=#acknowledgement> acknowledgement </a> </td> </tr> </table>