border-style :
none | hidden |
dotted |
dashed | solid |
double | groove |
ridge | inset |
outset
Compatibility: IE4+ N4+
Version: Level 1
Inherited: No
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.
You can declare one, two, three or four styles:
If you declare one style, all four borders will be that style.
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.
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.
hidden
The same as none, except that it can be used to resolve border
conflicts when two different types of borders join or intersect.
dotted
A dotted line appears on the background. This border style
is not recognized by many browsers.
dashed
A dashed line appears on the background. This border style
is not recognized by many browsers.
solid
A solid line appears on the background.
double
A double solid line appears on the background which has a
total width equal to border-width.
groove
A 3-D grooved 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.
inset
A 3-D inset line appears on the background. The exact appearance
depends on the selected color value.
outset
A 3-D outset line appears on the background. The exact appearance
depends on the selected color value.
Code:
body { border-style: double; }
body { border-style: double groove; }
body { border-style: double groove dashed; }
body { border-style: double groove none solid; }
or
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!
|