border-style
border-left-style
border-right-style
border-top-style
PROPERTY: border-bottom-style
border-bottom-style
:
none
|
hidden
|
dotted
|
dashed
|
solid
|
double
|
groove
|
ridge
|
inset
|
outset
Compatibility:
IE4+ N6
Version:
Level 2
Inherited:
No
The
border-bottom-style
property allows you to set the appearance of the border line style for the bottom border. Many of the possible styles are not recognized by various browsers.
There are similar properties to set the style for the bottom, right, and top, as well as all four borders.
dashed
A dashed line appears on the background. Many browsers do not recognize this border style.
dotted
A dotted line appears on the background. Many browsers do not recognize this border style.
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 of the line depends on the selected
color
value.
hidden
The same as
none
, except that it can be used to resolve border conflicts when two different types of borders join or intersect.
inset
A 3-D inset line appears on the background. The exact appearance of the line depends on the selected
color
value.
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.
outset
A 3-D outset line appears on the background. The exact appearance of the line depends on the selected
color
value.
ridge
A 3-D ridged line appears on the background. The exact appearance of the line depends on the selected
color
value.
solid
A solid line appears on the background.
Code:
body { border-bottom-style: groove; }
or
p.bordr
{
border-bottom-color: red; border-bottom-style: double; border-bottom-width: 15px;
border-left-color: yellow; border-left-style: double; border-left-width: 15px;
border-right-color: blue; border-right-style: double; border-right-width: 15px;
border-top-color: green; border-top-style: double; border-top-width: 15px;
}
...
<p class="bordr">
<b>DevGuru is great!</b>
</p>
Output:
DevGuru is great!
Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information