0

I am using -webkit-border-radius:5px; -moz-border-radius:5px; for the radius of the div. It is working fine in chrome and sfari but not in Mozilla Firefox and IE8. How I can resolve it

<div style="background-color:#f7f7f7; width:340px; height:175px; -webkit-border-radius:6px;-moz-border-radius:6px;">
              <div style="padding-top:20px;text-align:center"><input name="email" type="text" class="required emailcheck" placeholder="Enter your email address" id="email" style="height:25px; width:200px;-moz-border-radius:5px; -webkit-border-radius:5px; "></div>

              <div style="padding-top:20px;text-align:center"><input type="password" name="password" id="password" placeholder="Password"  class="required" style="height:25px; width:200px; -webkit-border-radius:5px;-moz-border-radius:5px;"></div>


          </div>​

JS Fiddle http://jsfiddle.net/ranasaani/uHHLX/

Muhammad Usman
  • 10,426
  • 22
  • 72
  • 107

2 Answers2

1

You can't make it work unless you use images, or a behaviour htc file for rounded corners.

To check support for something, use caniuse.com: http://caniuse.com/#search=border-radius

To get rounded corners in IE8 and below check the following page:

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Though these solutions are less than ideal, they are the only way I'm afraid....

sg3s
  • 9,411
  • 3
  • 36
  • 52
0

IE8 and below doesnt support the border-radius(css3)
to work for mozilla and IE9 you might need to include
border-radius:5px;