Summary

The border-style CSS property is a shorthand property for setting the line style for all four sides of the elements border.

• Initial value : none or as individual Properties.
• Applies to: all elements
• Inherited : no
• Media: visual
• Computed value : as individual properties

Syntax

border-style: [ <border-style> ]{1,4} | inherit

Values

<border-style> 

The Border Style can be any of the following values.

• none : No border, sets width to 0. This is the 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.

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 fourth sets the left.

Examples

View Live Examples

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notes

The default value of border-style is none. This meant that if you change the border-width and the border-color you will not see the border unless you change this property to something other than none or hidden.

Browser compatibility

Specifications

• CSS 2.1 Box model #border-style

See also

border, border-width, border-color, border-radius