Question

Having an issue applying the rules that rounders the upper-left and upper-right corners in the top heading (one with red background) in Firefox 4.

http://jsfiddle.net/gFA4p/10/

Is there some sort of precedence issue that I’m missing?

Answer 1

This works : http://jsfiddle.net/gFA4p/13/

Changed

#picksHeading{background-color:red}

to

#picksHeading th{background-color:red}

The ones you where try to round the edges on.

Also added :

-webkit-border-radius
-khtml-border-radius

Note for IE9 you have to decare all corners

.borderRightRadius {
border-radius:0 15px 0 0; 
}
.borderLeftRadius {
border-radius:15px 0 0 0; 
}

Previous versions of IE do not support border radius