There are three settings you can change on your borders:

border-width
border-color
border-style

Most of the time you will want to affect all of these attributes at the same time, and use the all-encompassing border attribute. You use these individual attributes if you want to override something you have previously defined in a stylesheet. Here's an example:

<div style="border: 3px coral solid;">text</div>

Notice how each of the values for each part (width, color and style) come one after the other, with a space between each. The order doesn't matter, but you must have all three in, or the border won't display.

Specific sides

There are four parts to each border:

border-top
border-left
border-bottom
border-right

With these you can make each side of the border display differently. If you want the border to be the same all the way around, just use border. For instance,

<div style="border: red 4px dashed; border-bottom: blue 4px solid; border-top-style: ridge;">text</div>

Notice how you can affect just one attribute of one side by putting this choice into the attribute, as in border-left-style. So long as the attributes you're not affecting have been defined elsewhere, your border will appear like the rest but with this one attribute modified.

Attribute Values

Ok, here are all the values you can use for each attribute.

border-width

These can be denoted in pixels, like border-width: 3px, or you can use one of the three standard values thin, medium and thick.

border-width: thin;

border-width: medium;

border-width: thick;

border-color

Not much to say here that you don't already know. You can colour your borders using HEX colour codes or named colours.

border-style

These attributes govern how your borders are presented. In the examples below, the top four's borders are set at border-width: 5px, but the style will be applied to the border regardless of its width. The bottom four need wider borders (and lighter colours) to appreciate the effects. There are eight possible styles you can use:

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;

discuss this topic to forum