Question

I am having trouble with Mozilla detecting -moz-border-radius. It’s defaulting to the normal border-radius and if I remove that it just turns back square at the edges again.

     -webkit-border-top-right-radius: 15px;
 -webkit-border-top-left-radius: 3px;
 -webkit-border-bottom-left-radius: 15px;
 -webkit-border-bottom-right-radius: 3px;
 -moz-border-radius-topright: 15px;
 -moz-border-radius-topleft: 3px;
 -moz-border-radius-bottomleft: 15px;
 -moz-border-radius-bottomright: 3px;
 border-top-right-radius: 15px;
 border-top-left-radius: 3px;
 border-bottom-left-radius: 15px;
 border-bottom-right-radius: 3px;

I have heard that mozilla has dropped the -moz- for border-radius, can anyone confirm this? I am using this code to make buttons for a site and I am having problems getting it to work cross browser.

    /* BACKGROUND GRADIENTS */
 background: #A2C838;
 background: -moz-linear-gradient(top, #A2C838, #92B432 50%, #82A02D 51%, #718C27);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A2C838), color-stop(.5, #92B432), color-stop(.5, #82A02D), to(#718C27));
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#A2C838', EndColorStr='#718C27'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#A2C838', EndColorStr='#718C27')"; /* IE8 */

The problem is I can’t really use border-radius as it seems to now affect mozilla and IE, but since IE doesn’t support gradients I’ve had to use filters, which revert my lovely curved corners back to squares. I could have them both as square but I like the look of the rounded corners and would prefer if I could save them. Thanks in advance.

Answer 1

If you need rounded corners in IE, you can either use a pre-rendered gradient image as the background instead of a filter, or try applying border-radius to a container element and using overflow: hidden to see if the gradient filter gets clipped by the container borders.

I have heard that mozilla has dropped the -moz- for border-radius, can anyone confirm this?

Yes, it is gone as of Firefox 13.

There really is no point supporting a non-standard property when the standard version of the same property has been so well-implemented for so long. There is also no reason to use the non-standard prefixed version over the standard unprefixed version in any situation, since the entire point of vendor prefixes is to provide experimental implementations that may or may not eventually become standards. You can’t rely on those non-standard properties always being there.

IE filters will always ignore border-radius, and that is by design. But just because one browser is doing something the non-standard way doesn’t mean you must go non-standard for every other browser. Besides, since IE squares off the corners anyway, there is really no harm in keeping the unprefixed border-radius in your code.