CSS 3 - Unsure?!

Question

Hello!

There is a huge use of rounded corners in web design, and as far as i'm aware this issue has been addressed in CSS3 so as to avoid having to hack around with images for curved corners etc.

However, by using built in rounded corner capabilities of CSS3 - will this affect the display of the site cross browser?

Answer 1

The browsers that don't support CSS3 will show sharp corners.

In general, it may not be a good idea to use those CSS options that are not supported by the vast majority of the browsers currently in use.

Alternatively you can use vendor-specific extensions along with the CSS3 styles. This will cover a good portion of browsers out there.

border-radius: 2em;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;

Answer 2

CSS3 is not a standard. It is not universally adopted. I strongly recommend not using it, at least not yet.

Even more important... do you absolutely need rounded corners? Will consumers not buy your products because the corners are not round? Rounded corners cost significantly more than any value they could possibly be worth.

Answer 3

It will depend on the browsers that support it. I'd advice not using it until the major browsers can handle it correctly. An overview of which browser can handle which CSS3 properties can be found on http://www.quirksmode.com/

Answer 4

An easy way to have easy, almost-cross-browser rounded corners, is to use a jQuery plugin called (yes you guessed it) rounded corners. You can find it at

http://plugins.jquery.com/project/corners

Last time I checked it said it supported IE6, but it didn't.

Answer 5

As with any other feature you need to weigh the following factors:

• The chances that the specification will change (given that it has not reached Recommendation status)
• The level of support for the feature in the browsers your visitors are using
• The severity of the consequences of that feature not being available for some users

A feature that makes pages look a little bit prettier is a smaller loss than a feature which lets users submit payment information (for example).