3.2 Border

The border property has many uses, from adding decoration to highlighting separation between different elements. You may recall we used it earlier in the HTML Tutorial with tables. Borders can be added to almost any element and there are several properties available to offer endless styling possibilities:

PropertyDescription
border-widthDefines a border width. Thin, medium, thick, or a numeric value in pixels
border-styleDefines a border style. Dotted, dashed, solid, double, groove, ridge, inset, outset, none or hidden (default)
border-colorDefines a border colour in hexadecimel, or basic colour names (like white, green, etc).
borderCompiles the above properties into one declaration

Border Width

The border-width can be used to define the width of a visible border. The values can be given in pixels, and there is support for values such as thin, medium and thick. For example:

h1	{border-width:2px;}

Border Style

The border-style property can be used to add different styling effects to a border that has a minimum thickness of 1px, although some effects won't show until the border is thicker still:

  • This is a solid border
  • This is a double border
  • This is a grooved border
  • This is a dotted border
  • This is a dashed border
  • This is an inset border
  • This is an outset border
  • This is a ridge border
  • This is a hidden border

Here is an example in a stylesheet:

h1	{border-style:dotted;}

Border Colour

The border-color property can be used for defining the colour of a visible border. The values are normally in hexadecimal, but there is support for common colour names such as red, blue etc. For example:

h1	{border-color:#990000;}

The above example would set the border colour to a shade of red. Using some of the above three properties together we could have:

h1	{border-width:2px;
	border-style:dotted;
	border-color:#990000;}

Which would look like this in a browser:

Heading Content

It is also possible to state different properties for each side of a border to an element. For example:

h1	{border-top-width: thick;
	border-top-style: dashed;
	border-top-color: #0000ff;

	border-right-width:2px;
	border-right-style:solid;
	border-right-color:#ff6600;

	border-bottom-width:5px;
	border-bottom-style:solid;
	border-bottom-color:#cd0000;

	border-left-width:thick;
	border-left-style:dashed;
	border-left-color:#006600;}

In addition we can set all four border sides to different widths, styles and colours using a semi-compiled format if we wish like this:

h1	{border-width:1px 10px 5px 20px;}

h1	{border-style:solid dotted inset groove;}

h1	{border-color:#990000 #009900 #000099 #999999;}

This would set the respective values in this order: top, right, bottom and then left. Note that the border-width and border-colour declarations above will only work if a border-style is set.

Border

Like with most elements, all of the above properties can be compiled into one simple declaration using the border property, the list order being: border-width; border-style; border-color. For example the folowing:

p	{border-width: 1px;
	border-style: solid;
	border-color: #ff0000;}

Can be compiled into:

p	{border: 1px solid #ff0000;}

Compiling the properties in this way can save a lot of time and effort.