Style borderBottomStyle Property
Example
Add a "solid" bottom border to a <div> element:
document.getElementById("myDiv").style.borderBottomStyle = "solid";Try it yourself »
Definition and Usage
The borderBottomStyle property sets or returns the style of the bottom border of an element.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| borderBottomStyle | 1.0 | 5.5 | 1.0 | 1.0 | 9.2 |
Note: The value "hidden" is not supported in IE7 and earlier versions. IE9 and later support "hidden".
Syntax
Return the borderBottomStyle property:
object.style.borderBottomStyle
Set the borderBottomStyle property:
object.style.borderBottomStyle=value
Property Values
| Value | Description |
|---|---|
| none | Defines no border. This is default |
| hidden | Same as "none", except in border conflict resolution for table elements |
| dotted | Defines a dotted border |
| dashed | Defines a dashed border |
| solid | Defines a solid border |
| double | Defines two borders. The width of the two borders are the same as the border-width value |
| groove | Defines a 3D grooved border. The effect depends on the border-color value |
| ridge | Defines a 3D ridged border. The effect depends on the border-color value |
| inset | Defines a 3D inset border. The effect depends on the border-color value |
| outset | Defines a 3D outset border. The effect depends on the border-color value |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | none |
|---|---|
| Return Value: | A String, representing the style of an element's bottom border |
| CSS Version | CSS1 |
More Examples
Example
Change the style of the bottom border of a <div> element to "dotted":
document.getElementById("myDiv").style.borderBottomStyle = "dotted";
Try it yourself »
Example
Return the bottom border style of a <div> element:
alert(document.getElementById("myDiv").style.borderBottomStyle);
Try it yourself »
Example
A demonstration of all the different values:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderBottomStyle = listValue;
Try it yourself »
Related Pages
CSS tutorial: CSS Border
CSS reference: border-bottom-style property
HTML DOM reference: border property
Style Object
