By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Border-style Property

Edited: 2015-12-07 13:11

The border-style is the short-hand way, of setting the style of all the borders.

Possible Values

  • none [no border]
  • hidden [same as none?]
  • dotted [dotted border]
  • dashed [dashed border]
  • solid [solid border]
  • double [Two borders, width of each is same as border-width value]
  • groove [3D-like effect, depends on border-color value]
  • ridge [3D-like effect, depends on border-color value]
  • inset [3D inset border. effect, depends on border-color value]
  • outset [3D outset border. effect, depends on border-color value]
div {
  border-style: double;
}

Note the format when using short-hand specifications is TOP|RIGHT|BOTTOM|LEFT

div {
  border-style: double dashed solid dashed;
}

In the above example, it should be obvious that we are setting the border as follows: Top is Double, Right is Dashed, Bottom is Solid, left is Dashed.

Inherited? NO!