Creating HTML Borders of Any Type (Exclusive Tutorial)

There are many ways to create attractive borders.

The simplest way is to use the parameter border <table> tag.

Example:

Significantly widening our possibilities, we will use CSS – in which, for example, you can change some features of the borders, including the thickness, type, and color of the borders.

Example:

However, what should we do in the event that these means are not enough, and we wish to create real unrepeatable borders or to completely build a fragment of a site in the existent style?

In this tutorial, you will learn how to create borders in any way you wish. The code which shall be the result of this tutorial is universal, and can be used in all but a few circumstances. If you are absolutely unfamiliar with HTML, then I suggest that you read this tutorial as a starter, although you will not understand everything.?

1. Take the picture with the border you want to convert to HTML.

Divide the existent frame into eight parts - 4 corners and 4 bodies of content - and save the pictures with their respective names, including their positions (as in the diagram). If we are working with repeating frames (as in our case) then for the body of the frame it is necessary to save at least the part which can be duplicated and used as the initial frame.

2. Create a table having the size of 3*3 cells. Here is the code:

All cells other than the central one are needed in the creation of the frame itself.

3. Now you should define the table size. To do this write the following in the <table> tag height="100%" width="100%" cellSpacing=0 cellPadding=0 border=0.
Height="100%" width="100%" – in order to ensure that the frame and its content occupy the same space.

Cellspacing=0 cellPadding=0 border=0 – in order to remove standard borders and margins in our table – we will work with them later.

Now define the width of the middle (horysontal) cells - with="3px" to the left and right, width="100%" to the central one.

4. Now lay out the margins of cells with transparent pictures in order to prevent the frame from becoming narrower or wider in any case. To do this, create a transparent picture having the size of 1px*1px and name it spacer.gif (or take it here). Now rewise what size did you take the corner border pictures and give the same size to spacer (3px*3px in our case). Now between all tags <td> and </td> insert spacer.gif. Here is the code:
<img src="spacer.gif" width="3px" height="3px">

Here is the code that you should see.

4. Now insert the pictures in the corresponding celsl in the table. In order to insert the picture in the cell you need to use the parameter background=“” in the <td> tag.

This is what you should see:

5. As for the central cells, you can adjust the margins inside the box using style="padding:10px 10px 10px 10px" (top, right, bottom, left), and likewise you can fill in the background, or apply color (bgcolor-“”). It is now possible to begin working with the content in the center of the box. You can insert any text, pictures, or whatever you wish into the central cells.

See the result(it is pased in the table with the default size):

The content comes here!

Well, that’s all there is to it. Now you can use already existent code for the creation of new borders. Simply insert the code, save new images, and a new outline is ready!

Best regards, Dustin Kein
WDL Team