Style borderStyle property

Definition and usage

borderStyle Property sets or returns the style of the element border.

This property can take one to four values:

  • One value, for example: p {border-style: solid} - All four borders are solid
  • Two values, for example: p {border-style: solid dotted} - The top and bottom borders are solid, and the left and right borders are dashed
  • Three values, for example: p {border-style: solid dotted double} - The top border is solid, the left and right borders are dotted, and the bottom border is double
  • Four values, for example: p {border-style: solid dotted double dashed} - The top border is solid, the right border is dashed, the bottom border is double, and the left border is dashed

See also:

CSS tutorial:CSS kant

CSS reference manual:border-style property

HTML DOM reference manual:border 属性

border property

Instance

Example 1

Adds a solid border to the <div> element:

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "solid";

Example 2

Changes the style of the four borders of the <div> element:

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Example 3

Returns the border style of the <div> element:

document.getElementById("myDiv").style.borderStyle = listValue;

alert(document.getElementById("myDiv").style.borderStyle);

Example 4

Demonstration of all different values:
var listValue = selectTag.options[selectTag.selectedIndex].text;

document.getElementById("myDiv").style.borderStyle = listValue;

Try it yourself

Syntax

Sets the borderStyle property:Returns the borderStyle property:

.style.borderStyle

Sets the borderStyle property:object .style.borderStyle =
value Value
Description none
Defines a border without borders. Default. hidden
Same as "none", except in resolving border conflicts 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 both borders is the same as the value of border-width. groove Defines a 3D inset border. The effect depends on border-color
Defines a 3D groove border. The effect depends on ridge Defines a 3D inset border. The effect depends on border-color
Defines a 3D ridge border. The effect depends on inset Defines a 3D inset border. The effect depends on border-color
The value of Defines a 3D outset border. The effect depends on the value of border-color.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: None
Return value: A string representing the style of the element's border.
CSS version: CSS1

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Støtte Støtte Støtte Støtte Støtte