Is there a better solution than -moz-border-radius

Question

I'm refactoring some pages put together by an old colleague and I can understand why he's left the company. I'm looking through his code and he's added -moz-border-radius:10 to an inline style. Okay this is great for Chrome and Firefox but how can I get this to work for IE? Any ideas anyone?

Thanks

Mark?

IE9 supports this, you can use just `border-radius` for modern browsers. For older versions of IE you can use http://www.ccs3PIE.com — Kyle, Jun 20 '11 at 09:48

score 0 · Accepted Answer · edited May 23 '17 at 10:08

0

IE9 support border-radius property, as well as Fx and Chrome. Use unprefixed name.

Support for "border-radius" in IE

For older browsers that do not support even prefixed names, you can only use hacks as tables with images or so.

edited May 23 '17 at 10:08

Community

1
1

answered Jun 20 '11 at 09:48

Tomasz Kowalczyk

10,472
6
52
68

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

IE 9, supports CSS 3 border-radius. If that's not what you're looking for, find htc files that implements border-radius.

Support for “border-radius” in IE

edited May 23 '17 at 12:02

Community

1
1

answered Jun 20 '11 at 09:49

Buhake Sindi

87,898
29
167
228

score 0 · Answer 3 · answered Jun 20 '11 at 09:55

you should put all the vendor prefixes first, then the CSS3 equivalent. In your case it would looke like this:

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

Internet Explorer 6,7,8 won't round corners, but this is ok from a progressive enhancement point of view. If it isn't ok from the client's point of view, you can either include a CSS based on CSS conditional statements and use a sprite with rounded corners or use a JavaScript fallback like http://css3pie.com/.

Older versions of Firefox, Chrome, Safari or Opera will round corners because of the vendor prefix.

Good luck.

Is there a better solution than -moz-border-radius

3 Answers3