The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides as for 'border-width' above.

      #xy34 { border-style: solid dotted }
      

In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.

Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.

The border styles mean:

none

no border is drawn (regardless of the 'border-width' value)

dotted

the border is a dotted line drawn on top of the background of the element

dashed

the border is a dashed line drawn on top of the background of the element

solid

the border is a solid line

double

the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value.

groove

a 3D groove is drawn in colors based on the <color> value.

ridge

a 3D ridge is drawn in colors based on the <color> value.

inset

a 3D inset is drawn in colors based on the <color> value.

outset

a 3D outset is drawn in colors based on the <color> value.

CSS1 core: UAs may interpret all of 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' and 'outset' as 'solid'.