CSS1 Border Styles

Using CSS1 is, at the moment, almost witchcraft. First, Netscape and Explorer implement it differently, even if it is supposed to be a standard. Second, the implementations in both browsers can give really unexpected results. If you are developing web pages and using CSS1, you should have a copy of both current browsers on your machine. This page is written as though you have Internet Explorer 4.01 and Netscape Communicator 4.06 or 4.5beta2. If you are using other versions, the implementations may not be the same. Differences between the browsers will be pointed out with caveats styled as

Netscape

and

Explorer

In order to set the border styles, you will have to know the rudiments of setting at least a few other properties: Let's start by using the <H3> tag.

First we have defined the basic style of this tag in the header style sheet with:


H3 { color: #3333AA ; font-family: Arial ; font-size: 14pt }

Arial 14 Point Defined for H3

Explorer apparently will not let you change the font size for any of the Hx classes. Consequently, if you use one of the Hx tags, you will not be able to change the font size or weight. Convince yourself of this by changing the H3 style definition to something really large.

Then we made a derivative style

H3.bdr { padding: 10px; background-color:#8888DD }

Arial 14 Point with Background Defined as H3 Class

Ooops! If you are in Netscape, where is the background? Here is an anomaly in Netscape:

In Netscape, the background would appear correctly if there were no H3 classes following which specified border or border-width except that the text would not be padded within the background. Using border or border-width in a style subclass seems to strip styling from any preceding H3 classes. This is not a problem in IE. To illustrate, we defined the H4 class to be identical to the H3 class. Here is something in the H4.pad class:

If you add a background to the style of a class in Explorer, it extends all the way across the page instead of just surrounding the text as it does in Netscape. Notice that the text is padded against the background, though.

Arial 14 Point with Background Defined as H4 Class

Now we are going to add a border:

H3.bdr { padding: 10px; background-color:#8888DD; border: 1px }

Arial 14 Point,Background,Padded,Border

This is undocumented; there is no such style parameter and in Explorer it has no effect at all. However, in Netscape, it makes the padding appear between the text and the background. But look what it does to our next sentence with the <P> style!

Instead of using the undocumented parameter, let's use border-width, which is documented:

H3.bdrxe { padding: 10px; background-color:#8888DD; border-width: 1px;
border-style: solid ; font-weight:bold }

Arial 14 Point, Background, Padded, BorderWidth

H3.bdrx { padding: 10px; background-color:#8888DD; border-width: 1px }

In Explorer, this STILL has no effect; it is the same as the H3.pad class.

Now let's add the border-style parameter to the style.

H3.bdrxe { padding: 10px; background-color: #8888DD; 
		border-width: 1px; border-style:solid ; fon-weight:bold}

Arial 14 Point, Background, Padded, BorderWidth, BorderStyle

This finally adds a border to the IE class. But notice that while there is padding between the text and background edge, there is NO padding between the background edge and the border. Also notice that the addition of the font-weight parameter has no effect.

The Font-weight parameter was added because in Netscape, the Bold effect went away with this declaration.

Now that we have covered all of the preliminaries and finally developed a class that we can use to show border styles, let's proceed to do so.

Dotted

Appears as solid border on both NS and IE

Dashed

Appears as solid border in IE

Has NO border in NS

Solid

Double

Groove

Ridge

Inset

Outset

Note that the border-color, since it is not defined, displayed is different between browsers. In Netscape, the border is black and gray; in Explorer, the border is the same color as the background and accented with black.