border-radius is absolutely one of those styles that I would seriously consider simply dropping for older browsers, if possible. It usually lends very little to the user, often carries a lot of overhead, and will likely not be missed by the user. Keep in mind that the traditional definition of “cross-browser” is really only pertinent to those QAing the page, because NO ONE else looks at the same site in multiple browsers. So, as long as your shit doesn’t break, you’re cross-browser.

That said, if you do need those rounded corners, here are ways to do it.

The Options

• CSS3 PIE

  Pros:

  • Comes as a single package, which also adds linear background gradients and drop-shadows to IE (only).
  • Is IE-only, so non-IE browsers get no additional weight, and if you add via an IE-only stylesheet, the rest of your stylesheets will validate (if that matters to you).

  Cons:

  • Comes as a single package, so if you don’t need those other features on a page, at 27.6kb, it’s a little heavy…
  • Because it requires a non-standard behavior for implementation, the stylesheet used to add this will not validate (if that matters to you).
  • Implementation requires JS; without JS, nothing happens.
  • Not all servers permit HTC files.

The Bottom-Line

I initially had several methods, but CSS3 PIE was the only one to prove stable in all the situations I tried to use it. So, if you need rounded corners, I’d say use CSS3 PIE.