How to Create CSS Borders

Borders can be applied to most HTML elements within the body.
To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.

border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.

Finally, border-color sets the colour.

Add the following code to the CSS file:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).

CSS Property: border-style, border-top-style, border-right-style, border-bottom-style, border-left-style

 
border-style specifies the style of an element’s complete border.

border-top-style specifies the style of an element’s top border.

border-right-style specifies the style of an element’s right border.

border-bottom-style specifies the style of an element’s bottom border.

border-left-style specifies the style of an element’s left border.

Possible Values

  • none – no border.
  • dotted – A series of dots (IE will display this as dashes if the border width is one pixel).
  • dashed – A series of dashes.
  • solid – A solid line.
  • double – Two solid lines.
  • groove – Patterned border that is supposed to represent a carved groove (opposite of ridge). Renders differently in different browsers.
  • ridge – Patterned border that is supposed to represent an embossed ridge (opposite of groove). Renders differently in different browsers.
  • inset – Patterned border that is supposed to represent an inset depression (opposite of outset). Renders differently in different browsers.
  • outset – Patterned border that is supposed to represent an outset extrusion (opposite of inset). Renders differently in different browsers.
  • hidden – Used with tables. Same as “none”, except where there are conflicting borders. Not supported by IE.
  • border-style can have:

  • one value, such as solid, to specify the style of the entire border
  • two values, such as solid dotted, to specify the style of top/bottom (first value) and right/left (second value) borders
  • three values, such as solid dotted dashed, to specify the style of top (first value), right/left (second value) and bottom (third value) borders
  • or four values, such as solid dotted dashed groove, to specify the style of top, right, bottom and left borders respectively

Example:

.curtains { border-right-style: solid; }
		
.blinds { border-style: dotted dashed; }