HTML elements are square. I couldn't actually tell you why they are square, but they are. div, table, you name it, all HTML elements are square. After 12 years of looking at these elements, square can become monotonous and boring. But what to do?

Well, the savvy person can find multiple methods of adding images to their tables to make them look round. That actually works, for the most part. If you have a static web site that never needs different sized or color corners, a PNG or a GIF would suffice. In fact, the world of developers seems to be happy with that solution.

But that's not the end of your options. With a simple algorithm, you too can turn your square HTML objects into nicely rounded HTML objects. You can do this with JavaScript or any server side programming application.

This example is done entirely with JavaScript. You start with a simple table like this:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right">
    </td>
    <td>
    </td>
    <td align="left">
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td align="right">
    </td>
    <td>
    </td>
    <td align="left">
    </td>
  </tr>
</table>

Rendered in your browser, with some minor alterations so you can see it, the table should look like this:

In order for the table data elements to show up properly, you need to make some changes to what you might normally do inside of a table. This example uses some very basic CSS to achieve that.

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right">
    </td>
    <td style="background: #EEEEEE; height: 100%;">
    </td>
    <td align="left">
    </td>
  </tr>
  <tr>
    <td style="background: #EEEEEE; height: 100%;">
    </td>
    <td>
    </td>
    <td> style="background: #EEEEEE; height: 100%;">
   </td>
  </tr>
  <tr>
    <td align="right">
    </td>
    <td> style="background: #EEEEEE; height: 100%;">
    </td>
    <td align="left">
    </td>
  </tr>
</table>

Rendered, that looks like this:

Lastly, you simply need to add a small <script> section to the table data elements in the corners, like this:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <script type="text/javascript">corner( 'ul', 50, '#EEEEEE' )</script>
    </td>
    <td> style="background: #EEEEEE; height: 100%;">
    </td>
    <td>
      <script type="text/javascript">corner( 'ur', 50, '#EEEEEE' )</script>
    </td>
  </tr>
  <tr>
    <td> style="background: #EEEEEE; height: 100%;">
    </td>
    <td>
    </td>
    <td> style="background: #EEEEEE; height: 100%;">
   </td>
  </tr>
  <tr>
    <td>
      <script type="text/javascript">corner( 'll', 50, '#EEEEEE' )</script>
    </td>
    <td> style="background: #EEEEEE; height: 100%;">
    </td>
    <td>
      <script type="text/javascript">corner( 'lr', 50, '#EEEEEE' )</script>
    </td>
  </tr>
</table>

Rendered, that looks like this:

Unfortunately, Internet Explorer does not display this method properly. It does not respect the height attribute of the CSS, but instead relies on the font size. Even a font size of 0 pixels witha fixed height is 2 pixels. This means that your corners, in IE will have twice the actual height of each individual line.

Lastly, you need the JavaScript and it's very simple. You can either manully replace param[ 'color' ] with the color of your choice or you can copy the query string handling JavaScript used in this page.

function corner( h, r ) {

  // Because the rounded elements need to be drawn differently based on
  // the hemisphere you are drawing, you need to tell the routine
  // whether you want the top portion or the bottom portion.
  if (h == 'top') {

    for (var i = r; i >= 1; i--) {

      // All this does is draw a line.  The lines are 1 pixel in height
      // and just the right width so that when stacked, a nice rounded
      // curve is rendered.
      draw_line( i, r );

    }

  } else if ( h == 'bottom') {

    for (var i = 1; i <= r; i++) {

      draw_line( i, r );

    }

  }

}

function draw_line( i, r ) {

  // This is the formula for the area of a circle, meaning using this
  // method, you are drawing the inner part of the circle.  If you wish
  // you can draw the area inside of a radius width square that is
  // not the area of a circle of the same radius, you can use:
  //
  // var j = r - Math.sqrt( (r * r) - (i*i) );
  var j = Math.sqrt( (r * r) - (i*i) );
  document.write( '<div style="height: 1px; width: ' +
    j + 'px; background: '+ param[ 'color' ] + ';line-height: 1px; font-size: 1px;">&nbsp;<\/div>' );

}