Style borderStyle 属性

定义和用法

borderStyle 属性设置或返回元素边框的样式。

此属性可以采用一到四个值：

  • 一个值，例如：p {border-style: solid} - 所有四个边框都是实心的
  • 两个值，例如：p {border-style: solid dotted} - 上下边框为实线，左右边框为虚线
  • 三个值，例如：p {border-style: solid dotted double} - 上边框为实线，左右边框为点线，下边框为双线
  • 四个值，例如：p {border-style: solid dotted double dashed} - 上边框为实线，右边框为虚线，下边框为双线，左边框为虚线

另请参阅：

CSS 教程：CSS 边框

CSS 参考手册：border-style 属性

HTML DOM 参考手册：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 all 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

All different values demonstration:
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 any style. Default. hidden
Same as "none", except when resolving border conflicts in 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 that represents the style of the element's border.
CSS Version: CSS1

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持