CODEWITHSUNDEEP
firefoxbordercss
Kyle
Kyle

Reputation: 67194

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

Upvotes: 1

Views: 347

Answers (4)

Touhid Rahman
Touhid Rahman

Reputation: 2583

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.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630389

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

Upvotes: 2

Mike Pollitt
Mike Pollitt

Reputation: 2007

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.

Upvotes: 4

dclowd9901
dclowd9901

Reputation: 6826

-moz-border-radius-topright: 0px

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

Upvotes: 2

Related Questions