CODEWITHSUNDEEP
cssfirefox
Chin
Chin

Reputation: 20675

Border radius on table row doesn't work on Firefox

I'm making the background of my table rows have rounded corner. Here is the CSS:

<table>
    <tr>
        <td> first cell </td>
        <td> middle cell </td>
        <td> third cell </td>
    </tr>
</table>

tr:hover {
    background-color: #ffff00;
}
tr:hover td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

tr:hover td:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

jsFiddle

It works just fine on Chrome:

enter image description here

but it doesn't work on Firefox:

enter image description here

What did I do wrong and how can I fix it on Firefox?

Upvotes: 6

Views: 3677

Answers (1)

vals
vals

Reputation: 64164

You are splitting the style on 2 elements, and FF doesn't understand that.

The background is on the tr, and the rounded corners on the td

posible solution: apply the background on the td

body {
    margin: 100px;
}

td {
    padding: 10px;
}

tr:hover td {
    background-color: #ffff00;
}
tr:hover td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

tr:hover td:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
<table>
    <tr>
        <td> first cell </td>
        <td> middle cell </td>
        <td> third cell </td>
    </tr>
</table>

Upvotes: 11

Related Questions