Rounded Nifty Corners

In reference to rounded Nifty Corners by Alessandro Fulciniti...
For some of us (including myself ;-) it worth explaining how it works so we could extend the same approach to vast variety of scenarios where graphics is required but images/svg/flash/vrml are not advisable.

The main idea of Alessandro's approach is to create graphical effects using set of rectangular (block-level) elements. Width and height of those elements are explicitly specified on the page so when the browser puts those blocks together they form some kind of closed shapes with solid fill.
As the example let us create a circle with block-alike elements. For the sake of simplicity the block element will be represented as the line of X-character.

   XXXXXX
 XXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
 XXXXXXXXXX
   XXXXXX

The idea of creating shape-rich graphics with the limited set of fixed elements is similar to ASCII Art and the rastering of images itself. The difference and the main advantage of Alessandro's approach is that shape created not from the one-pixel elements but with much more larger elements that obviously conserve the page's weight. This approach may be extended not only to UI decoration but also to charts, graphs, tree viewers, floor plan diagrams or whenever row-by-row or column-by-column rectangle-constructed structures will weight less than the equivalent image.