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)...

Code: (HTML/CSS)

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:

Code: (JS/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 :)