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