CSS 2.1 Reference: border-style Property

The border-style property is used as a shorthand method to specify all 4 border styles in one place. See the Box Model for a description of the boxes that are generated for elements and the relative position of the borders.

• The Individual border sides are specified as follows:
  • If 1 style is specified - All 4 borders are set to this style.
  • If 2 styles are specified - 1st style = top and bottom borders, 2nd style = left and right borders.
  • If 3 styles are specified - 1st style = top border, 2nd style = left and right borders, 3rd style = bottom border.
  • If 4 styles are specified - 1st style = top border, 2nd style = right border, 3rd style = bottom border, and 4th style = left border.

CSS Example: Four different border-style properties are set by specifying one, two, three, and four style values respectively.

#sample1 {border: medium solid red;
          border-style: dotted;
}
#sample2 {border: medium solid red;
          border-style: dashed double;
}
#sample3 {border: medium solid red;
          border-style: dotted double dashed;
}
#sample4 {border: medium solid red;
          border-style: solid dotted double dashed;
}

• none - No border.
• hidden - The same as the keyword none. It is however different for table elements in terms of border conflict resolution.
• dotted - This is a sample
• dashed - This is a sample
• solid - This is a sample
• double - This is a sample
• groove - This is a sample
• ridge - This is a sample
• inset - This is a sample
• outset - This is a sample
• inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.

Note: The border samples, shown above, may not appear identically in all browsers.