CSS border-bottom-style Property

CSS border-bottom-style property sets the bottom border style of an element.

Usages

The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderBottomStyle = "double"

Syntax

Here is a syntax for the CSS border-bottom-style property

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
none Default. Displays no border.
hidden same as none, except table cells border conflict resolution
dotted Displays the border as a series of rounded dots
dashed Displays the border as a series of short square dashes
solid Displays the border as a single solid line
double Displays the border as a two parallel solid lines with some space between them equals the value of border-width.
groove Displays the border as a grooved border. It's depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color
ridge Displays the border as a ridged border that is opposite of groove effect.
inset Displays the border as a inset border, it's look as though it were embedded in the canvas. It's depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color
outset Displays the border as a outset border that is opposite of inset effect.
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets border bottom style.

.border-1 {
  border-bottom-style: solid;
}
.border-2 {
  border-bottom-style: none;
}
.border-3 {
  border-bottom-style: groove;
}
.border-4 {
  border-bottom-style: dashed;
}
.border-5 {
  border-bottom-style: double;
}
.border-6 {
  border-bottom-style: inset;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.