border radius misbehaving

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 box should be 0 to join them.

HTML:

<fieldset class="error">
    <input id="product__79_specField_8" name="specField_8" class="text " autocomplete="" type="text" value=""/>
    <input type="image" src="upload/orng_bg_arrow"upload/id="product__specfield_8_arrow" value=""></input>
    <div class="errorText hidden"></div>
</fieldset>

CSS

#product__79_specField_8,
#product___specField_8 {
    background-color:#ffa105;
    width:194px;
    height:33px;
   开发者_运维技巧 border: 1px solid #dddddd;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-right-radius:0px;
    border-top-right-radius:0px;
    -moz-border-bottom-right-radius:0px;
    -moz-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-top-right-radius:0px;
    font-weight:bold;
    font-size:24px;
    padding-left:55px;
    float:left;
}

#product__specfield_8_arrow {
    background-color:#ffa105;
    width:50px;
    height:33px;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-bottom-left-radius:0px;
    -moz-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
}

---

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.

---

-moz-border-radius-topright: 0px

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

---

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

---

Solution:

-moz-border-radius:5px 10px 150 20px;
-webkit-border-radius:5px 10px 150 20px;
border-radius:5px 10px 150 20px;

Here,
5px is for top left corner,
10px is for top right corner,
15px is for bottom right corner,
20px is for bottom left corner.