jQuery .css() borderRadius not working in FF(3.6) and IE(6,7) on Windows

The following code doesn't seem to work in FF(3.6) and IE(7) on Windows XP. 开发者_如何学Go

$("#myDiv").css({
  mozBorderRadius: "6px",
  webkitBorderRadius: "6px",
  borderRadius: "6px"   
});

Is there anything I can do to make this work?

C

---

IE7 doesn't understand border-radius, so the CSS is ignored. You can either live with it, or try to find a fancy solution to render rounded corders using images.

I would choose the first, although there are numerous examples (like this one) out there if you really need rounded corners in those old browsers.

FF 3.6 does support rounded corders, but you should use -moz-border-radius for that.

---

for Firefox, as GolezTrol said, it should be -moz-border-radius (or MozBorderRadius) instead of mozBorderRadius. unfortunatelly, IE 6 and 7 both don't support border-radius so you have to work around that by:

• using images instead

or, for the lazy ones:

• using css3pie. you only have to add one line to the stylesheet for elements that could have border-radius:

  behavior: url(path/to/PIE.htc);
  

  note that this solution also allows you to use box-shadow and linear gradients wich might also be useful. just take a look at the demo.