Rounded corners better than Nifty Corners

The well known Nifty Corners can be used to apply rounded corners to page elements. Nifty and similar tools add a bunch of elements of varying heights to simulate a rounded corner. I've realised that there's a cool way to do corners in HTML documents that uses lots fewer inserted elements than Nifty Corners.

The trick is, that when borders meet, browsers draw a nice diagonal chamfer. Like in this picture.. see how the browser's rendering of the borders makes a nice neat diagonal line where the borders meet.

Nothing special yet, right? Next, we'll see what happens when there's differently sized borders, and no content.

Ok, this is the same div with zero width and height, wide bottom and right borders, and narrow top and left borders. The 'content' of the div woulld normally be the bit between the four borders, but because the content is zero sized, the borders are triangles that meet in the centre; of off-centre, in this case. Hmm, interesting. Next we'll try less colours..

Now the top and left borders are coloured white, like the background. The bottom and right borders are blue.. and you can see the effect I've been going for here: a two-line approximation of a curve. Shiny.

This example is quite large, but at 10 pixels across instead of 40, it's quite a nice looking corner. Position this one div over the boring square corner of a blue box, and you've got a nice curvy looking corner.

It gets even cooler.. if you put a second div inside the first, you can have four lines to approximate the curve. Like this:
I've coloured the inner div lighter than the outer so you can see where they happen.

Ok that's as much as I can write today -- I'll come back to this later and maybe whip up a function to apply this rounding to your corners.