CSS Property - Border Style

Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

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".

Example:

p{
border-style: solid dotted;
}

This is the result

In the above example, the horizontal borders are "solid" and the vertical borders are "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
    (depending on which browser you are using this CSS property will look different)

  • 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".