Good/Bad to use -moz-border-radius

Hi!

I have notice that some sites are using -moz-border-radius to get round cornors on elements? Is this a good practice? Are there any 开发者_开发百科cons with it?

I would recommend adding "-webkit-border-radius" to cover Safari and Chrome, and "border-radius" to cover the CSS3 standard.

The only problem is IE8 won't support the rounded corners. But it looks nice in all other browsers.

Using border-radius (and it's browser specific friends -moz-border-radius and -webkit-border-radius) is the simplest strategy for getting rounded corners on elements. Because this method is standards compatible (and doesn't need ugly hacks such as positioned elements with backgrounds), it is the best way.

For the differences between -moz and -webkit, see this page at css3.info. This page also contains some more info about it.

Yes, border-radius is considered good practice. It's certainly a lot better than the alternatives such as messy JQuery stuff or worse, a set of corner graphics -- all the alternatives have major issues, ranging from non-scalability to messing up your backgrounds. border-radius is pure CSS and has none of these issues.

The only reason you wouldn't use it is lack of support in web browsers. However all the major browsers except IE now support border-radius. Some do still need a vendor prefix like -moz-, so you need to specify it several times but the functionality is basically the same across all browsers.

The one browser that doesn't support it is IE, up to version 8 (IE9 will support it, but isn't released yet). The good news is that there is a very nice little hack for IE that adds support for border-radius (and a few other features too), even to older versions like IE6.

The hack is called CSS3Pie, and is well worth taking a look at if you want to use this feature. It means you can use a modern CSS3 feature like border-radius without having to stress too much about your IE users.

Philosophically

The CSS property for border-radius is one of the best ways to achieve rounded corners anywhere on a website. IMO it is THE BEST way.

Although border-radius is not supported on across all browers/versions, I like to stick with using this property for almost all instances where rounded-corners are beneficial because rounded-corners are a decorative feature, so therefore not essential in instances where it is not supported, and also typically not worth the extra bandwidth of using an image based effect, or even a javascript hack like CSS3Pie.

This follows the "progressive-enhancement" rationale of web design. Users that have a modern browser supporting border-radius get to see them, other users don't. But a border radius is typically not an issue of accessibility or usability, so therefore implementing via CSS is the best route to go 95% of the time.

Practically

In practice using border-radius requires actually three properties to be supported across the majority of modern browsers:

div {
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

The first, border-radius is the actual property listed in the CSS3 spec, and one day will be the defacto implemented rule. But until widespread adoption is achieved and the spec is finalized, you still need to include the vendor-specific prefixes for -moz- (Mozilla Firefox) and -webkit- (Google Chrome and Apple Safari browsers).

Resources

http://border-radius.com/ Generates the proper rules / shorthand versions depending on what values you wish to apply and which corners you wish to round. Very handy.

http://www.css3.info/preview/rounded-border/ Some additional info about vendor support, how to use the shorthand, etc.