border radius se comporte mal

Question

En FF ce rayon de bordure ne semble pas vouloir fonctionner. Editable lien ici.

Le bon rayon de la grande boîte devrait être 0px et la gauche de la petite boîte devrait être 0 pour les joindre.

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; 
} 

Answer 1

Malheureusement, les formes des attributs CSS varient entre webkit et mozilla.

Pour Firefox, vous voulez:

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

Pour Safari & Chrome vous voulez:

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

Vous semblez avoir:

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

qui n'est pas valide.

Answer 2

-moz-border-radius-topright: 0px

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

Answer 3

Vos déclarations sont un peu loin, les styles de mozilla devraient ressembler à ceci:

#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

Answer 4

Solution:

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

Ici,
5px est pour coin supérieur gauche,
10px est pour coin supérieur droit,
15px est pour le coin inférieur droit,
20px est pour coin en bas à gauche.