Is there any non-messy way to make boxes with rounded corners?

[DWilliams]

I've seen several methods so far and the source for all of them is incredibly non-intuitive.

 

The cleanest method I've found is here: http://articles.sitepoint.com/article/css-round-corners-boxes-curves

 

Even it isn't that nice, the HTML for boxes is like:

 

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>

 

And in addition you have to manually create corner images.

 

I don't suppose there's any way to simplify something down to, say:

 

<div class="rounded_corners">wow that was easy</div>

 

is there?

[Jimania]

"Google" curvy corners and get the process.  It is very clean and reliable.  Yo may need to employ WebKit in order to satisfy some browsers.  Curvy Corners is awesome.

[gizmola]

There is no simple way, although as mentioned by Jimania, there's a javascript library that attacks the problem.  The issues are:

 

-There's no base html support for the idea

-Trying to do it with css involves hacks or browser specific extensions

-IE seemingly always has to go its own way, or outright suck

 

So many sites these days rely on javascript, that it's hard to argue with its ability to perform magic and even out the rough edges. 

[haku]

Actually I've been using this method recently: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

 

It's relatively clean*, requires no javascript, and works for all browsers, though it requires a small .htc file for IE.

 

*additional markup is required for some elements in IE, which can be a bit of a pain in the butt. I use conditional stylesheets for IE so that only people using IE are penalized.