Skip to main content

Visit Mozilla.org

CSS:border-style

From MDC

« CSS Reference

[edit] Summary

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

[edit] Syntax 

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

[edit] 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 forth sets the Left.

[edit] Examples

View Live Examples 

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

[edit] Notes

By Default the border-style is set to 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.

[edit] Specifications

[edit] Browser compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

[edit] See also

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

Retrieved from "http://developer.mozilla.org/en/docs/CSS:border-style"