To download any of these images, right-click (Windows) or click-and-hold (Macintosh) on them; then select "Save image as..." and choose a directory on your hard drive where you'd like to save them.

First off, the individual pieces appear below. After those you can see some samples of how this border design looks when the pieces are put together.

• THE PIECES
• EXAMPLE ONE
• EXAMPLE TWO
• EXAMPLE THREE
• EXAMPLE FOUR
• LAYOUT TIPS

THE PIECES (9) - All have transparent backgrounds
02hbot.gif Size: 1.85K	02hbot2.gif Size: 3.03K	02htop.gif Size: 1.87K
02htop2.gif Size: 3.09K	02ll.gif Size: 2.66K	02lr.gif Size: 2.65K
02ul.gif Size: 2.61K	02ur.gif Size: 2.63K
		02vert.gif Size: 3.63K

EXAMPLE ONE

This simple example uses each border section once (the vertical section is actually used twice - once on each side). The table layout is pretty basic (see the second version, with a visible table border) but in order to enforce my cel spacing I have used a transparent GIF file at the top of the center cel - its width is set to 286, which keeps everything in line. In the lower version, the table's border line has thrown the design slightly out of alignment. Remember to read the Layout Tips.   ^transparent GIF

EXAMPLE TWO
These two smaller borders each just use one of the two horizontal border sections for the top and bottom. They also use a table background color (the visible background areas of the graphics are transparent). Both still use that transparent GIF as a spacer. In the left sample, the GIF is sized 101 pixels wide, while in the sample on the right the GIF is sized 156 pixels wide. Remember to read the Layout Tips.

EXAMPLE THREE

The design can be extended either horizontally or vertically, as shown here, by repeating border sections. When extending it horizontally you should remember to modify the sizing of the transparent GIF image. You don't need to create multiple transparent GIFs- you can just resize the graphic through the IMG tag. Remember to read the Layout Tips.

EXAMPLE FOUR

Of course, you can also combine these border sections with other designs, as shown here. Remember to read the Layout Tips.

1. Remember that each of these pieces is downloaded only once by the web browser. That means that there's no additional download time for each of the repeating sections.

2. You should be very cautious about placing text inside a border that's closed on the bottom; because the size of fonts will vary from one system to another, on some systems your border may develop gaps between the sections. It's safest to use a graphic in the middle so you have control over its size.

3. Be sure that your table sets its border size, cel padding, and cel spacing all to zero - otherwise there will be gaps in the design. On some browsers if these attributes are not set they may default to one, not zero.

4. This design uses a transparent background (the exposed interior is transparent) so you can set the table color to whatever you like, as in some of the examples.

5. Using a small transparent GIF, as I do here, is a handy layout trick. HTML isn't a perfect layout medium and sometimes you just need to force your elements to go together the way you want them. One thing I did NOT do in these examples was to set the table width via HTML. It would have confused your editing of the tables, so I left it out. You may want to experiment with that, too.