Style borderStyle Property
Example
Add a "solid" border to a <div> element:
document.getElementById("myDiv").style.borderStyle = "solid";Try it yourself »
Definition and Usage
The borderStyle property sets or returns the style of an element's border.
This property can take from one to four values:
- One value, like: p {border-style: solid} - all four borders will be solid
- Two values, like: p {border-style: solid dotted} - top and bottom border will be solid, left and right border will be dotted
- Three values, like: p {border-style: solid dotted double}- top border will be solid, left and right border will be dotted, bottom border will be double
- Four values, like: p {border-style: solid dotted double dashed} - top border will be solid, right border will be dotted, bottom border will be double, left border will be dashed
Browser Support
The borderStyle property is supported in all major browsers.
Syntax
Return the borderStyle property:
object.style.borderStyle
Set the borderStyle property:
object.style.borderStyle=value
Property Values
| Value | Description |
|---|---|
| none | Defines no border. This is default |
| hidden | The 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 border |
| CSS Version | CSS1 |
More Examples
Example
Change the style of the four borders of a <div> element:
document.getElementById("myDiv").style.borderStyle = "dotted solid double
dashed";
Try it yourself »
Example
Return the border style of a <div> element:
alert(document.getElementById("myDiv").style.borderStyle);
Try it yourself »
Example
A demonstration of all the different values:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Try it yourself »
Related Pages
CSS tutorial: CSS Border
CSS reference: border-style property
HTML DOM reference: border property
Style Object
