In this demonstration I would like to go through all the possibilities for the border style value. I have included the CSS code as inline style code, even though external CSS is the industry standard.

This text is surrounded by a solid border, check out how it looks. The width is 1 pixel and the color is black. border:1px solid #000000;

If I replace the solid value with dotted this is the result.

This text is surrounded by a dotted border, check out how it looks. The width is 1 pixel and the color is black. border:1px dotted #000000;

To see the effect more clearly I increase the size of the border to 3 pixels.

This text is surrounded by a dotted border, check out how it looks. The width is 3 pixels and the color is black. border:3px dotted #000000;

I replace dotted with dashed

This text is surrounded by a dashed border, check out how it looks. The width is 3 pixels and the color is black. border:3px dashed #000000;

Next I try double

This text is surrounded by a double border, check out how it looks. The width is 3 pixels and the color is black. border:3px double #000000;

Now I enter outset

This text is surrounded by a outset border, check out how it looks. The width is 3 pixels and the color is black. border:3px outset #000000;

Now I try inset

This text is surrounded by a inset border, check out how it looks. The width is 3 pixels and the color is black. border:3px inset #000000;

Another option is groove - that sounds fun!

This text is surrounded by a groove border, check out how it looks. The width is 3 pixels and the color is black. border:3px groove #000000;

The final value is ridge

This text is surrounded by a ridge border, check out how it looks. The width is 3 pixels and the color is black. border:3px ridge #000000;

I could change the styles along various edges, by declaring specific border-top-style and border-bottom-style values.

This text is surrounded by a variety of border styles, check out how it looks. The width is 3 pixels and the color is black. border-width:3px; border-color:#000000; border-style:solid; border-top-style:dashed; border-bottom-style:dotted;

I can also specify specific colors for specific border sides. By adding border-top-color:#FF0000; and border-left-color:#FF0000; I produce this effect.

This text is surrounded by a variety of border styles, check out how it looks. The width is 3 pixels and the color is black. border-width:3px; border-color:#000000; border-top-color:#FF0000; border-left-color:#FF0000; border-style:solid; border-top-style:dashed; border-bottom-style:dotted;

You can also declare the width of a border with word value instead of a pixel size, the words are thin, medium, thick.