Cross browser rounded corners (no image)

Question

When converting PSD's into HTML or even HTML5 and CSS, how much more difficult is it to round the corners and make those corners consistent across all browsers, especially Internet Explorer?

Assuming the corners were rounded with code, not images.

Answer 1

With the CS3 border-radius property, it's not hard. Some browsers have their own implmentation, like -moz-border-radius for firefox and -webkit-border-radius for safari and chrome.

But IE still does not support the border-radius, so it's hard to get make it work cross-browser.

Answer 2

You can check out Corner if you want a JavaScript solution. It's cross platform.

Answer 3

There are a few workarounds for cross browser rounded corners not using Javascript:

CSS Rounded Corners In All Browsers
An Experiment in Rounded Corners
Rounded corners in CSS (cross browser implementations)

Using CSS3 for webkit & gecko based browsers, SVG for Opera and VML for IE.
Also you may want to use the well-known jQuery Corners if you want it via Javascript.

Answer 4

You already accepted but CSS3 PIE you can just use the border-radius property (along with gradients, shadows, and other fun CSS3 features) in IE3. I think it's one of the cleaner ways to approach the problem.