Rounded corners pure CSS

After looking at some css rounded corner examples, I found them too complex. Multiple nested tags and long code examples. I just came up with a simple one. This one is pure css, without images or javascript. Did not test for IE6, but really, who cares anymore (and it might work anyways)...

hello world

And there you have it. You need to specify a width (and optionally a height) or else the entire width will be used (as you'd expect from a div). The only excessive css is the coloring (color/background-color) and positioning of the text (padding of inner div). Don't forget to use a standards mode for that nifty cross-browser support thingy.

Here's the snippet in CDE:

CDE.div().rel().wh(50,50).m(1).tac().css({backgroundColor: 'red'}).add(
CDE.div().abs(0, -1, '100%', '100%').css({border: 'solid black', borderWidth: '1px 0', borderTopColor: '#ccc'}),
CDE.div().abs(-1, 0, '100%', '100%').css({border: 'solid black', borderWidth: '0 1px', borderTopColor: '#ccc'}),
CDE.div().wh('100%','100%').c('white').pt(4).txt('hello world')
);


Hope it helps ya :)