border-style: solid dashed dotted double;

border-style

value: <border-style>{1,4}
initial-value: see individual properties
inherited: no
percentages: N/A
applicable to: all elements

The border-style attribute allows you to specify what style of border you wish to display. the border-style attribute is a shorthand property for:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

The value can have 1 to 4 different styles. If more than one style is stated, the first style given will start on the top border, then right, bottom and left. If only two styles are stated, the first style will be on the top and bottom border, the second on the left and right.

A border-style will only display if a border-width and border-color are also given for that element. The border-style is not inherited from containing elements. Any element can have a border-style.

Take Note: There are several W3C recommended styles allowed, but not all browsers will recognize all of the styles.

Here is a list, with examples, of each style possible.

none "none" is the default value. It does not need to be stated unless you are negating styling placed on the element from another source.  
hidden "hidden" is the same as "none" but is used for conflict when styling for tablets  
dotted "dotted" will present a line of dots, the corners can get a little weird.
 
dashed "dashed" will present a seried of dashes with spaces between, all of equal length
 
solid "solid" is just that, a solid border with no spaces
 
double "double" will present two parallel lines with a space between them. The thickness of the lines and the space are each equal and proportional to the "border-width" setting.
 
dot-dash The "dot-dash" style is a new CSS3 style, and not many browsers will display this style.
 dot-dash-border
dot-dot-dash The "dot-dot-dash" style is a new CSS3 style, and not many browsers will display this style.
 dot-dot-dash-border
wave The "wave" style is a new CSS3 style, and not many browsers will display this style.
 wave-border
groove The "groove" border style presents a two tone border meant to resemble a groove.
 
ridge The "ridge" border style presents a two tone border meant to resemble a ridge.
 
inset The "inset" border style will present two adjacent borders with a darker tone than the color specified and two adjacent lines with the color specified to give an inset appearance.
 
outset The "outset" border style will present two adjacent lines with the color specified and two adjacent borders with a darker tone than the color specified to give an outset appearance.
 

Example:

.quotebox {border-width: 3px; border-color: #7744CB; border-style: solid;}
.guestbox {border-width: 6px; border-color: #CCC; border-style: dotted dotted solid dotted;}
#mybox {border-width: 10px; border-color: #CC0; border-style: dashed solid ;}

.quotebox
.guestbox
#mybox