CSS2 » Properties » border-bottom-style

Version: Level 2

Compability: IE4+  N6

Syntax:
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
solid
A solid line appears on the background.
ridge
A 3-D ridged line appears on the background. The exact appearance of the line depends on the selected color value.
outset
A 3-D outset 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.
inset
A 3-D inset 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.
groove
A 3-D grooved line appears on the background. The exact appearance of the line depends on the selected color value.
double
A double solid line appears on the background which has a total width equal to border-width.
dotted
A dotted line appears on the background. Many browsers do not recognize this border style.
dashed
A dashed line appears on the background. Many browsers do not recognize this border style.

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. This property is not inherited.

There are similar properties to set the style for the bottom, right, and top, as well as all four borders.

Examples

Code:
body { border-bottom-style: groove; }
Language(s): CSS2
Code:
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!

Language(s): CSS2

See Also: