CSS3 Rounded Corners using moz-border-radius not round in FF, IE8, Opera

[Zhuchina]

1) Script Title: CSS3 Rounded Corners using border-radius

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css3_rounded_corners_using_border_radius/P10/

3) Describe problem: For sometime (1-2 years) rounded corners as described on page above were rounded in FF, but for several months already they appear like square in FF14.0.1 - and on DD page above all corners are square in FF, IE8 and opera, same on my page www.lawandsea.net. But somehow moz-border-radius property works with forms (http://www.vooshthemes.com/demos/css3-contact-form/css3-contact-form.html). Any solution for div tags?

Thanks. Igor.

[jscheuer1]

Just about everything -moz- has been deprecated in Mozilla of which Firefox is a member. They and all modern browsers conforming to CSS 3 standards now use the actual CSS 3 property, in this case:


border-radius:

so add it to your style declaration, use the same values for it that you are using for -moz-border-radius.

In fact, just about anything -moz- that's broken can be fixed by adding it without the -moz- prefix. For example, what used to be -moz-opacity, is now just opacity. You can do this with almost anything and it will work, and it has the added benefit of often also working in other CSS 3 browsers like IE 9 and Opera.

In a few years, no one will be using -moz-, -webkit-, -khtml-, or -ms- (yes IE has those for some things in some of its browsers), because the standard CSS 3 property without any of these prefixes will be universally supported.

But for now they're still required or at least sort of nice for backward compatibility.

[Zhuchina]

Thanks a lot. May be some updating of "CSS3 Rounded Corners using border-radius" page will do no harm as well? I was suspecting that browser does not recognize this code anymore but unfortunately could not find any answer.
Igor.