This section of the site considers the use of Islamic borders on web sites.
 
The Title Box above could have been created as an image, but in the interests of fast download times over slow connections, it has been built using an HTML table structure, a version of which can be seen below.
 
It has been formed with three rows and three columns. The corner cells contain separate images whilst the horizontal and vertical bars have tiled background images of just one link in the chain. The 6 separate images have file sizes totalling just 0.73Kb. The beauty of this method is that the total file size will remain the same regardless of the dimensions of the table.

The cells in the corners of the table have width and height attributes identical to the actual size of the corner images. The width/height of the horizontal/vertical bars must be adjusted so that the background images fit neatly with the corners. This can be achieved in a number of ways. In this case CSS padding has been used in connection with the text box, but an equally effective method is to use CSS Absolute Positioning.

The method described above works well for units that are essentially symmetrical. In the example below the elements are asymmetrical which calls for greater care when preparing them. In practice this is so difficult (check out the mismatching at the corners) that it may be more appropriate to use single images for the vertical and horizontal bars. In this case the difference in total file sizes is 2.71Kb for single units as opposed to 13.21Kb for whole bars. This may not be important in some instances.