Borders

	This tutorial is going to explain how make a nice curved border around some text. The trick is to make the border look the same in all the common types of browsers, which is not as obvious as it might seem.

Please be aware that this is a tutorial, not simply step by step instructions on how to do this. The tutorial is trying to teach you a number of things at the same time, so it may be a bit longer than simple step by step instructions would be, but hopefully at the end of this you will have a clearer understanding about how tables work in the popular browsers, as well as a technique for making borders around many different parts of the page. 

Part One: Fixed sized boxes First we need to draw the border in Photoshop, or some other image editor program. The border used above is made up of 9 pieces. The original was smaller and stretched to look like this using tables. The box on the right is the original size of the image in Photoshop:

This was sliced into 9 pieces, and the center one was thrown away. The slices were cut with one important idea in mind, the 4 side slices must each be straight lines so that if we tile one of the edges in a table it will match all the way along the edge. So these are the slices that were made:

Next we place the slices in the outer cells of a table, and set the table to 200 pixels square. We place a non-breaking space character in the center square where the text will go later. At this point it looks the same in all the browsers. I left the borders on and set a background color so you could see what is happening with the cells.

So next we will set the corner cells to the same sizes as the image slices. This worked in Internet Explorer, but not in Netscape. Why? Because Netscape thinks we made a mistake, since we didn't specify a size for the edge cells, so it continues to distribute the space between the cells. So we add the sizes to the four edge cells too. These have to be calculated based on the size of the corner images subtracted from the total size of the table. Now the table itself and all of the cells in the table have all sizes specified in pixels. It now looks like this:

Obviously something is still missing. The corners look OK, but the 4 edges have large gaps with no image. Stretching the image is one way to go, but a better way to go (and one that will be needed later when we want the box to be a variable size) is to move the image that is in each edge cell into the background for that cell, and replace the one inside the cell with a transparent GIF that is the same size. Since the background will tile, and the cells already are the exact size of that image in one direction or another, the background will blend together perfectly with the corner cells to make a continuous border. We remove the table borders and the table background color and it now looks like this:

Note: Because of a bug in Netscape 6.0 it is important that images used in the backgrounds of tables and cells do not show up anywhere on top of the page. I discovered this after writing this tutorial, which worked perfectly in all browsers I tested it in, but I had tested it with Netscape 6.2 rather than 6.0. The bug seems confined to NN6.0, and spreads from page to page, so you can not use an image that is in the background of a table or cell on one page and in the foreground on another page either.