table row style overridden by td style css

Question

EDIT3: http://jsfiddle.net/ZgTHa/

Basically I have a table with an 1px solid grey border containing a radio button in each row. I apply an 1px red border on the row which is selected via the radio button. The color doesn't change. But if I set the red border to 2px, it changes.

I think this has to do with some priority issues, meaning that if both borders are 1px and both are solid, the td applies, if the td border is dotted, then the solid one applies for the chosen row. same situation if the selected row has a larger border width then the td.

I think this is just how it is in css (I might be wrong and missing something here) but I was wondering how one can work around this issue with relative ease (I could set a background image and put no borders and such, but that seems drastic)

edit (an example of what I'm trying to say):

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse

if you add a "red-border" class on one of the tr like so:

<tr class="red-border">

and specify the red-border class style like so:

.red-border {
    1px solid red;
}

it doesn't apply. But if you add:

.red-border {
    2px solid red;
}

it does apply. same goes if you set the td border to dotted:

table, td, th
{
    border:1px dotted black;
}

and keep the red border as 1px solid red, it does apply.

ill just work around it with styling the tds with specific classes which get added on the click event. I'm just curious if this is how its intended to work or am I missing something?

edit2:

i have applied the styles like so:

.red-border {            
                background-color: #fbfafa !important;
                color: #571c20;
                .first {
                    border-left: 1px solid #571c20 !important;
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .second {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .third {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .fourth {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                    border-right: 1px solid #571c20 !important;
                }
            }

it still doesn't apply sometimes. It applies well for the first row, on the second row the top border doesn't apply, same for the third row. On another table the right border doesn't apply.

Answer 1

seems i have found the anwser:

.red-border {
    border: 1px double red;
}

im guessing the double style resolves the conflict between the tr and td borders.