The border-style property is used in CSS and certain HTML elements. It is a shorthand property for setting the line style for all four sides of the element's border. To set the line type for each individual side, use border-top-style, border-right-style, border-bottom-style, or border-left-style.


Up to four values can be given. The first value sets all four borders. The second sets the left and right. The third sets the bottom. The forth sets the left.

  • none - No border; default value.
  • hidden - Same as none, except in terms of border conflict resolution for table elements.
  • dashed - Series of short dashes or line segments.
  • dotted - Series of dots.
  • double - Two straight lines that add up to the pixel amount defined as border-width.
  • groove - Carved effect.
  • inset - Makes the box appear embedded.
  • outset - Opposite of inset. Makes the box appear 3D (embossed).
  • ridge - Opposite of groove. The border appears 3D (coming out).
  • solid - Single, straight, solid line.

HTML example:

<span style="border:medium solid white;">TEXT</span>

CSS example:

h1 {
    border:medium solid white;