CODEWITHSUNDEEP
css
Junaid Inayati
Junaid Inayati

Reputation: 33

css border radius for mozilla

On the given page below the border radius for the #topnav doesnt work for mozilla but works for google chrome, i use the following css code:

http://www.kbay.in

#topnav { display:inline-block;float: right; text-align: right; background: #e4f4fe; 
    border:1px solid #e4f4fe;
    border-bottom-color: #e4f4fe;
    border-bottom-width: 4px;
    border-bottom-style: solid; 
    border-radius: 0px 0px 15px 15px; 
    -moz-border-radius-bottomleft: 15px; 
    -moz-border-radius-bottomright: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    margin-right: 90px; margin-top: 0px;
    width:265px;}5E9DC8

Upvotes: 3

Views: 297

Answers (2)

Doc Roms
Doc Roms

Reputation: 3308

Yes, now, with last browser version, old prefixes ( -o, -moz, -webkit ) are deleted, just use "border-radius" for all new browser ( ie, opera, chrome and firefox) it's a W3C spec but, for "old" browser, continue to use old profixes,

existing one specific website for generate css border radius code just here.

Upvotes: 1

Christoph
Christoph

Reputation: 51211

The new Firefox has now the unprefixed version of border-radius.

Though the old version was

-moz-border-radius-bottomleft: 15px;

you now have to take

border-bottom-left-radius: 15px;

for the new Firefox. That's why you always have to declare the official version last (so no overriding can happen).

-moz-border-radius-bottomleft: 15px; 
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
/*last border-radius declaration has to be the standard one*/
border-radius: 0px 0px 15px 15px;

Nonetheless, it still should work. Perhaps you have some other rule overriding this one? (Example) Also, delete the 5E9DC8 behind your ruleblock.

Btw, you are on the safe side if you just choose the shorthand notation because it has no notation-differences.

Upvotes: 4

Related Questions