Quite a few different stylesheets properties relate to putting a border around an element on a Web page.

(Red alert! IE 3 doesn't support any of the border properties discussed on this page — just so you know.)

border-top-width, border-bottom-width, border-left-width, border-right-width

The first thing you can control is the width of the border, and you can control each side separately:

H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }

You can apply borders to replaced elements as well as to text elements. Fun, eh?

You don't necessarily have to define a border for all sides of an element. If you want, you can put a border on just one side, as seen to the left of this paragraph. (In IE 4 and 5, you need to define the other sides as 0 or else the browser will give them its own idea of size.)

For specifying width, you can use any of the same length values we've seen before. You can also use some built-in keywords:

The border above this text has a value of thin.

The border above this text has a value of medium.

The border above this text has a value of thick.

If your browser doesn't support this CSS property, click here to see what it looks like.

Do you want all sides of your border to be the same width? Simply use the shortcut border-width tag. The following stylesheets rule would put an even 1-inch border all the way around the graphic:

IMG { border-width: 1in }

The second aspect of borders that is under your control is color.

P { border-color: green; border-width: 3px }

This paragraph shows the above code in action.

If your browser doesn't support this CSS property, click here to see what it looks like.

You can use the color names browsers already recognize or, better yet, you can use hexadecimal values, like so:

H4 { border-color: #FF0033; border-width: thick }

P { border-color: #666699 #FF0033 #000000 #FFFF99; border-width: 3px }

This paragraph shows the above code in action.

Note: Communicator doesn't recognize multiple colors, so you're stuck with just one. (When multiple colors are used, Communicator often uses blue for the whole border. We have no idea why.)

By the way, if border-color isn't used, then the border will take on the color of the element itself.

border-style

Finally, you can specify the style of the border line:

P { border-style: double; border-width: 3px }

The possible keywords are:

solid

double

dotted

dashed

groove

ridge

inset

outset

If your browser doesn't support this CSS property, click here to see what it looks like.

Note: You have to use border-style with IE 4 and 5, or they won't display any border at all.

IE 4.x for the Mac is the only browser to support dotted and dashed.

Another thing you might notice is that IE gives a border to the entire width of the area, whereas Navigator gives a border only to the word itself.

If you so desire, you can also set border styles individually for each side (though I have no idea why you'd want to do so). As with border-color, you declare the values in this order: top side, right side, bottom side, left side.

And that about does it for borders. We have one more topic to look at in this lesson: floating elements.