CSS border-style

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

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

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

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

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours