неправильное поведение радиуса границы

Question

В FF этот радиус границы, кажется, не хочет работать. Редактируемая ссылка здесь.

Правый радиус большого ящика должен быть 0px, а левый от маленького ящика должен быть 0, чтобы присоединиться к ним.

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

К сожалению, формы атрибутов CSS различаются в зависимости от webkit и mozilla.

Для Firefox вы хотите:

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

Для Safari & Chrome вы хотите:

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

У вас, кажется, есть:

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

, что недействительно.

Answer 2

Ваши объявления немного отклонены, стили Mozilla должны быть такими:

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

Для хорошего сравнения равенства всех 3, смотрите здесь

Answer 3

-moz-border-radius-topright: 0px

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

Answer 4

Решение:

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

Здесь,
5px для верхнего левого угла,
10px для верхнего правого угла,
15px для нижнего правого угла,
20px для левого нижнего угла.