Setting a Border

It is possible to create a border around an element and then to set its thickness, colour and style.  If you happen to have specified padding on your element then the border encloses both the padding and the contents of the element.

To define the border-style
Type border-style: type - Here, type can be replaced with none, dotted, dashed, solid, double, groove, ridge, inset or outset.

To set the width of the border:
Type border-width: n - Here n is your chosen width, including abbreviated units e.g. 4px

To set the colour of the border:
Type border-color: color - Here color is a colour name or RGB colour.

It is necessary to define at least one style for a border to display.  If you don't define the style then there will be no border because the default is none. The default colour is the value of the elements color property. You can also express the width in general terms if you like ie thin, medium, and thick.  The default is always medium.

In a similar way to margins and padding, the individual border properties of border-width, border-style and border-color can have from one to four values.  If you only use one value then it will be applied to all four sides but if you use two values then the first will be used for the top and bottom whereas the second will be used for the right and left.  If you use three values than the first is used for the top, the second for the right and left and the third will be used for the bottom.  Finally if you use four values they will be applied to the top, right, bottom and left in a strictly clockwise fashion.