CSS border-style

jameskeezer's avatar
jameskeezer's avatar
jameskeezer
Published May 12, 2021Updated Dec 12, 2023
Contribute to Docs

Sets the style of the border. The default value is none.

Syntax

border-style: <line-style>;

where <line-style> can be the following values:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Example 1

Set border of the h1 element to be green, 3 pixels thick, and dotted:

h1 {
  border-color: green;
  border-width: 3px;
  border-style: dotted;
}

The following image demonstrates the code block above:

h1 element with 3px dotted green border

Example 2

Set the top and bottom borders dashed and the left and right borders solid:

h1 {
  border-style: dashed solid;
}

The following image demonstrates the code block above:

h1 element with dashed solid border

All contributors

Contribute to Docs

Learn CSS on Codecademy