I’ve knocked together a quick demonstration of what CSS can do these days. Take a look (I’ll wait).
Ultimately, this is how this sort of styling should be done on the web. Importantly, I’m not a web designer and I haven’t used any “tricks” to deliver this. This is all hand-coded from easy to read articles on the web. You can do this yourself without very much work; cutting and pasting the code on this page would be a good start.
The weakness is the anti-aliasing (Firefox does this slightly better than Chrome). If you had a single colour background and no transparency, you could fix that with the excellent cornerz plug-in. I’m not sure what other approaches you could do here. There’s a Javascript PNG generator that could be used to create corner images, but it would be very hard to be compatible with both the gradient and the background image. There’s also some nasty issues with the compatibility of background images and background effects: sometimes the wrong one shows on top. Finally, the opacity isn’t all it could be: there’s no easy way of getting the text fully opaque and getting the gradient bleed through at the same time.
As with most things CSS, it’s all a bit more complex than you think it should be. But it does work. Here’s hoping browsers improve their anti-aliasing and render the rest of this discussion moot.
Colour Coding 