Change background on hover with CSS3 rounded corners

Question

I have a table and one side of the table is an array of links. Currently I have a background color change on hover to make it appear as if the cell in the table has been pressed. The problem with this is, after setting the display:block property on the cells, when the cell is hovered over it leaves out the rounded edges and looks bad. Any way to deal with this?

CSS

.bigtable {

    text-align:left;
    padding:0px 5px 0px 5px;
    color:white;
    border: 2px solid #999999;
    margin:0px 5px 0px 5px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    text-shadow:0 1px 1px white;
    font-size:x-large;
}
td {
    padding: 5px 5px 5px 5px;
    background-color:#0063dc;
    -moz-border-radius:20px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-shadow:0 1px 1px black;


}
td a:hover {
    display:block;  
    background-color:blue;

}

snippet of table:

<table style="width: 100%; height: 730px;" cellspacing="5" cellpadding="5" class="bigtable">
                    <tr>
                                    <td>news</td>
                                    <td><ahref="">click on this box to read about what is 
                                    mmunity</a></td>
                    </tr>
                    <tr>

i know what the problem is, but i don't know how to fix it. it's the td a:hover part of the CSS that's doing it what i'm telling it to. how can i instruct the hover of a link to change the ENTIRE td color, not just the link part?

Answer 1

According to the spec, this is how border-radius in CSS3 works. The content inside the box with the radius "bleeds" through the rounded corner.

You'll have to give your links a border-radius as well.

Answer 2

Did you try re-applying the CSS for the :hover rule? Else the inline-block may be of assistance.

What browsers display this behavior?

Answer 3

A quick fix for modern browsers would be to apply overflow:hidden to the container with the border-radius:

td {
    padding: 5px 5px 5px 5px;
    background-color:#0063dc;
    -moz-border-radius:20px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-shadow:0 1px 1px black;
    overflow: hidden; /* important bit */
}

This should clip the corners of your link and maintain the cell's rounded edges.

Now, if you still wanted to affect the cell from the link, you're going to have to use javascript. CSS, by design, is devoid of parent selectors.