{border-style:}

						border-style: { { none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset }  1 to 4 values | inherit } ;
					

The shorthand property border-style sets the style of the border on all four sides of an element using the values specified. Each border can have its own value—refer to the mnemonic (TRouBLe) in Shorthand Properties for an easy way to remember the shorthand order.

{none;}

{border:none} means no {border:} will show, and the computed border-width is zero.

{hidden;}

{border:hidden} has the same meaning as none, except when it refers to <table> {border:}s in cases where two cells share a border, and the table cells have collapsed borders {border-collapse:collapse;). The value hidden ensures that no border is drawn, since hidden takes precedence over all other border styles. If none had been used for one border in the cell, the border would still be drawn, as the adjacent cell’s border would take precedence.

{dotted;}

{border:dotted} implements the {border:} as a series of dots.

{dashed;}

{border:dashed} implements the {border:} as a series of dashes.

{solid;}

{border:solid} implements the {border:} as a solid line.

{double;}

{border:double implements the {border:} as two solid lines. The sum of the two {border-width:} and the space between them equals the value that has been set for {border-width:}.

{groove;}

{border:groove} is a three-dimensional effect that gives the impression that the {border:} is carved into the canvas.

{ridge;}

{border:ridge} is a 3D effect that has the opposite effect of {groove;}, in that the {border:} appears to protrude from the canvas.

{inset;}

{border:inset} is a 3D effect that gives the impression that the box is embedded into the canvas. When it’s used on tables to which the separated borders model has been applied, the {inset;} value appears to make the whole box look as though it were embedded into the canvas. When used with the collapsing border model, it’s treated the same as the value {ridge;}.

{outset;}

{border:outset} is a 3D effect that has the opposite effect of {inset;} in that the {border;} gives the impression that the box protrudes from the canvas. When it’s used on tables to which the separated borders model has been applied, the {border:} makes the whole box look as though it were coming out of the canvas. When it’s used with the collapsing border model, it behaves the same way as groove.

Previously, in CSS1, user agents were allowed to interpret all dotted, dashed, double, groove, ridge, inset, and outset styles as solid.

User agents are supposed to place borders on the element’s background, but in Internet Explorer for Windows versions up to and including 7, the background only reaches the inside edge of the border when the element has a layout. This means that for dotted or dashed borders, the background won’t be visible through the spaces within the border. When the element doesn’t have a layout, the background will extend under the borders.

When dotted borders are specified as the border-style, and the border’s width is only 1px, Internet Explorer for Windows versions up to and including 6 will display the borders as dashed instead of dotted. At a width of 2px and above, the dotted borders will display correctly. This glitch was fixed in Internet Explorer Version 7 for cases when all four sides are set to 1px. However, if one of the sides is set to 2px or more, the 1px dotted borders revert to dashed in IE7.

The appearance of the borders may vary between user agents (within limits). The algorithms that define the relationship between the colors used to achieve an effect (for example, groove, ridge, inset, and outset) are not explicitly defined in the CSS specifications, so the colors may vary between user agents. In CSS2.1, the three-dimensional border styles (groove, ridge, inset, and outset) depend on the corresponding border-color, rather than on color.

• Internet Explorer for Windows versions up to and including 7:
• don’t support the value hidden
• don’t support the value inherit

CSS Property: {border-style:}

Possible {border-style:} Values

{none;}

no border.

{dotted;}

A series of dots (IE will display this as dashes if the {border-width:} is one pixel).

{dashed;}

A series of dashes.

{solid;}

A solid line.

{double;}

Two solid lines.

{groove;}

Patterned border that is supposed to represent a carved groove (opposite of {ridge;}). Renders differently in different browsers.

{ridge;}

Patterned border that is supposed to represent an embossed ridge (opposite of {groove;}). Renders differently in different browsers.

{inset;}

Patterned border that is supposed to represent an inset depression (opposite of {outset;}). Renders differently in different browsers.

{outset;}

Patterned border that is supposed to represent an outset extrusion (opposite of {inset;}). Renders differently in different browsers.

{hidden;}

Used with tables. Same as "none", except where there are conflicting borders. Not supported by IE.

{border-style:} Can Have The Following Values:

one value

such as {solid;}, to specify the style of the entire border.

two values

such as {solid dotted;}, to specify the style of top/bottom (first value) and right/left (second value) borders.

three values

such as {solid dotted dashed;}, to specify the style of top (first value), right/left (second value) and bottom (third value) borders.

or four values

such as {solid dotted dashed groove;}, to specify the style of top, right, bottom and left borders respectively.