CSS2 » Properties » border-style

Version: Level 1

Compability: IE4+  N4+

Syntax:
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
outset

A 3-D outset line appears on the background. The exact appearance depends on the selected color value.

inset

A 3-D inset line appears on the background. The exact appearance depends on the selected color value.

ridge

A 3-D ridged line appears on the background. The exact appearance depends on the selected color value.

groove

A 3-D grooved line appears on the background. The exact appearance depends on the selected color value.

double

A double solid line appears on the background which has a total width equal to border-width.

solid

A solid line appears on the background.

dashed

A dashed line appears on the background. This border style is not recognized by many browsers.

dotted

A dotted line appears on the background. This border style is not recognized by many browsers.

hidden
The same as none, except that it can be used to resolve border conflicts when two different types of borders join or intersect.
none
The none value is the default. If no style is declared, no border will appear even if other border properties have been set. By declaring none, you can ensure that any previous declaration will not effect the four borders.

The border-style property allows you to select the same line style for all four borders. The border-style property is also used in border-left, border-right, and border-top. This property is not inherited.

If you declare one style, all four borders will be that style.
 
You can declare one, two, three or four styles:

If you declare two styles, the top and bottom borders will be the first style, the right and left borders will be the second style.
 
If you declare three styles, the top border will be the first, the right border the second, and the bottom and left borders the third style.
 
If you declare four styles, the order is top, right, bottom, left.

Examples

Code:
body { border-style: double; }
body { border-style: double groove; }
body { border-style: double groove dashed; }
body { border-style: double groove none solid; }
Language(s): CSS2
Code:
p.bordr
{
border-color: red red red red;
border-style: solid solid solid solid;
border-width: 30px 30px 30px 30px;
}
...
<p class="bordr">
DevGuru is great!
</p>
Output:

DevGuru is great!

Language(s): CSS2

See Also: