home > css > borders

borders

There are many effects you can achieve by using borders in your css style sheets. These can be applied to most html elements, such as tables, table cells, paragraphs, layers and images. Unfortunately, Dreamweaver 4 does not handle the border attributes very well, although this may be fixed in future versions. Therefore, it is best to edit your external css style sheet in a text editor, such as NotePad, for border effects. More information about creating external style sheets.

You can have borders around the whole element, just on top, just on bottom and left and right. The border can be solid, dotted, dashed, double, groove, ridge, inset, outset and none. These are supported by newer, more standards compliant, browsers such as Microsoft Internet Explorer 5+, Netscape 6+ and Opera 5. Experiment to see which style suits your web site.

using dreamweaver

Dreamweaver users will have to define the style attributes in the external style sheet using a text editor. Once you've saved the style sheet, you can then open the page in Dreamweaver and see the newly defined styles in the styles menu (Window>CSS Styles from the top toolbar). Each time you need to change/add a new style in the text editor, you will have to re-open the page in Dreamweaver to see new styles as Dreamweaver does not automatically refresh the list if the page is currently open.

n.b.: This is only applicable for elements with borders, Dreamweaver copes well with other style sheet definitions. Edit your style sheet by clicking on the "Edit Style Sheet" icon at the bottom right of the styles window.

creating the css attributes

Open your text editor and either edit the css attributes for an existing element, or create a new definition or class. More information about classes.

adding a border to an html element

TABLE {
border: solid 1px #000000;
}

This will put a solid black border of 1 (one) pixel around all your tables. (Make sure that border is not set to "0" in the html.) This doesn't put a border round all the table cells inside the table though. To do this, you'll need to use the following:

TABLE {
border-top: solid 1px #000000;
border-right: solid 1px #000000;
}

TD {
border-left: solid 1px #000000;
border-bottom: solid 1px #000000;
}

Use the following html for a two column, two row table (or add a 2x2 table with no border in Dreamweaver):

<table cellpadding="5" cellspacing="0">
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
</table>

This should look like this:

You can experiment with the style of border. Instead of solid, try any of the following: dotted, dashed, double, groove, ridge, inset, outset and none. You can also change the hex color value and thickness of the border.

With the double border style, the width of the lines is supposed to determine how far apart the two lines are, but this is still a bit buggy in some browsers.

H1 {
border-bottom: double 2px #CC0000;
}

This should produce a 2 pixel wide red double border with 2 pixels between each line underneath all your Heading 1 elements.

borders and layers

Adding a border to a layer can be achieved by using the following in your css style sheet:

#layername {
position: absolute;
left: 200px;
top: 100px;
width: 300px;
z-index: 90;
border: 1px solid #CC0000;
background-color: #FFFFFF;
layer-background-color: #FFFFFF; [n.b. this is not valid css, but required if the background color is to show properly in Netscape 4.x]
visibility: visible;
}

Use the following html (in Dreamweaver make sure the layer is a DIV, not LAYER or ILAYER):

<div id="layername">Content of layer</div>

borders and classes

You can add a border style to any part of your html, using classes to span smaller sections of block elements. This is also applicable when applying border styles to inline elements, such as <b> (bold text).

Create a class in your style sheet as follows:

.styleborder {
border-left: double 10px #CC0000;
}

And add the following html to the text you wish to have the border applied to (in Dreamweaver simply highlight the text and apply the style):

<p>A normal paragraph with some <span class="styleborder">border style</span> applied to only part of the text.</p>

This should apply a red double border with 10 pixels of space between the lines to the left of the spanned text like this:

A normal paragraph with some border style applied to only part of the text.

You can also create a class for a table cell that's different from the other cells in that table to create interesting border effects:

TABLE.main {
font-family: verdana, arial, helvetica, sans-serif;
background-color: #E2FAFA;
border-left: 1px solid #330033;
border-right: 1px solid #330033;
border-bottom: 1px solid #330033;
width: 760px;
}

TD.different {
background-color: #E2FAFA;
border-left: dashed 1px #669999;
border-right: dashed 1px #669999;
}

This will create a different border for the table cells with the class "different" if you use the following html (in Dreamweaver, create the table and apply the class "main" to it, then select the middle cell and apply the class "different" to it):

<table class="main" cellpadding="5" cellspacing="0">
<tr>
<td>Normal table cell</td>
<td class="different">"Different" styletable cell</td>
<td>Normal table cell</td>
</tr>
</table>

This should apply a dark purple border round the whole table and teal dashed borders on the left and right of the "different" table cell like this:

As you can see, borders can be very useful and have many variations. It would be impossible to show all the numerous combinations here, so happy experimenting!

n.b.: Be careful about applying just a border-bottom to any text, as this could look like a link and confuse your visitors.