Stretchable Graphical Borders

Abstract

If your browser supports simple cascading style sheets, then you should see that this page is surrounded by a border with a pleasing shadow effect. So is the title above. Graphical borders on html pages are fairly common. They are built with images and tables. But the graphical borders on this page are a little different; they automatically resize to fit the content, (Try resizing your browser window.) they are constructed with valid html, (Some implementations of this idea use nonstandard, browser specific features, such as <td background="/some/image.gif">.), and they degrade gracefully. (If your browser does not support the required features then you should see nothing at all.)

This is my second implementation of this idea. The first version used a mixture of HTML and CSS to place the background images. Unfortunately, the borders display incorrectly on some recent browsers, notable Mozilla. (Is this a bug or a feature?) This version is simpler, due to a greater use of CSS. It works in recent browsers, and degrades gracefully in older browsers.

Here is another shadow border table, but with the border attribute set to "1", and cellspacing to "4".

The code for the framed content looks like this:

<table class="shadow" border="0" 
    cellspacing="0" cellpadding="0" align="center">  
  <tr>
    <td class="shadow-topLeft"></td>
    <td class="shadow-top"></td>
    <td class="shadow-topRight"></td>
   </tr>
   <tr>
     <td class="shadow-left"></td>
     <td class="shadow-center">
       Your Content Goes Here. 
     </td>
     <td class="shadow-right"></td>   
   </tr>
   <tr>
     <td class="shadow-bottomLeft"></td>
     <td class="shadow-bottom"></td>
     <td class="shadow-bottomRight"></td>
   </tr>
</table>    

The content is placed in the center cell of a 3 by 3 table. Each cell has a different class attribute. In the head portion of the html page we place the following Cascading Style Sheets.

<style type="text/css">
  table.shadow { 
    align: center
  }

  td.shadow-top { 
    height: 16px;  
    background-image: url(/style/borders/shadow/top.gif)
  }

  td.shadow-topRight { 
    width: 16px;
    height: 16px;
    background-image: url(/style/borders/shadow/topRight.gif)
  }

  td.shadow-right { 
    width: 16px; 
    background-image: url(/style/borders/shadow/right.gif)
  }

  td.shadow-bottomRight { 
    width: 16px; 
    height: 16px; 
    background-image: url(/style/borders/shadow/bottomRight.gif)
  } 

  td.shadow-bottom { 
    height: 16px;
    background-image: url(/style/borders/shadow/bottom.gif)
  }

  td.shadow-bottomLeft { width: 16px;
    height: 16px;
    background-image: url(/style/borders/shadow/bottomLeft.gif)
  } 

  td.shadow-left { width: 16px;
    background-image: url(/style/borders/shadow/left.gif)
  }

  td.shadow-topLeft { 
    width: 16px; 
    height: 16px; 
    background-image: url(/style/borders/shadow/topLeft.gif)
  }      

  td.shadow-center { 
    background-color: white  
  }
</style>

Each table cell class has a different background image and size. Each corner cell has a fixed size (16 by 16 pixels in this case), and is filled with a single image of appropriate size and appearance. In contrast, the edge cells (top, bottom, left and right) cells do not have fixed sizes. Instead, the background image is only 1 pixel tall or wide, and is repeated enough times to cover the entire cell. In the table above, the image used in the left cell is 16 pixels wide, and 1 pixel high. At 8 times resolution it looks like this: .

But does it work? There are many browsers with many bugs. It is very hard to make something like this work on all of them. (Besides, this kind of pixel by pixel design is an abuse of html. We have no right to expect it to work.) So far as I know, this method of generating a graphical border works on all major browsers. Either it works perfectly, or, on the older browser, it degrades gracefully, and nothing is displayed. If you find that this page renders incorrectly please send an email that lists your browser, platform and browser version.

Feel free to cut and paste, or otherwise use and abuse this code. The images were derived from the window shadow effect of the new look Mac OS X. A variety of different borders are also available.