CSS Border-Style Property

The border-style property defines the format of the border. The table below shows the possible values and how each one renders.

CSS Declaration	Output
border-style:solid;	Solid Border
border-style:dashed;	Dashed Border
border-style:double;	Double Border
border-style:dotted;	Dotted Border
border-style:groove;	Groove Border
border-style:ridge;	Ridge Border
border-style:inset;	Inset Border
border-style:outset;	Outset Border

The default value for border-style is "none."

The border-style property itself is a shorthand for the following properties:

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

There can be one, two, three, or four values set for the border-style property. The rules are as follows:

• one value: the style applies to all four borders.
• two values: the first style applies to the top border and the bottom border, and the second style applies to the left border and the right border.
• three values: the first style applies to the top border, the second style applies to the left border and the right border, and the third style applies to the bottom border.
• four values: the first style applies to the top border, the second style applies to the right border, the third style applies to the bottom border, and the fourth style applies to the left border.

Example 1: Single border style

CSS Declaration

border-style: dotted;

results in the following:

In Example 1, one style (dotted) is defined. Therefore, all four side are shown with the dotted style.

Example 2: Multiple border style

CSS Declaration

border-style: solid dashed;

results in the following:

In Example 2, two styles are defined. The first style (solid) applies to the top border and the bottom border, and the second style (dashed) applies to the left border and the right border.