border radius misbehaving.

Question

In FF this border radius doesn't seem to want to work. Editable link here.

the right radius of the big box should be 0px and the left of the small boxshould be 0 to join them..

Answer 1

-moz-border-radius-topright: 0px

http://www.css3.info/preview/rounded-border/

Answer 2

Unfortunately, the forms of the CSS attributes vary between webkit and mozilla.

For Firefox, you want:

-moz-border-radius-bottomright:
-moz-border-radius-bottomleft:
-moz-border-radius-topright:
-moz-border-radius-topleft:

For Safari & Chrome you want:

-webkit-border-top-left-radius:    
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

You seem to have:

-moz-border-bottom-right-radius:0px;
-moz-border-top-right-radius:0px;

which isn't valid.

Answer 3

Your declarations are a bit off, the mozilla styles should be like this:

#product___specField_8 {
  -moz-border-radius-bottomright:0px;
  -moz-border-radius-topright:0px;
}

#product__specfield_8_arrow {
  -moz-border-radius-topleft:0px;
  -moz-border-radius-bottomleft:0px
}

For a good equality comparison across all 3, look here