目录

style borderStyle 属性

❮上一节 ❮ 样式对象参考下一节❯

示例

向 <div> 元素添加 "solid" 边框：

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

亲自试一试 »

描述

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

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

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

浏览器支持

Property
borderStyle	Yes	Yes	Yes	Yes	Yes

语法

返回 borderStyle 属性：

object.style.borderStyle

设置 borderStyle 属性：

object.style.borderStyle = value

属性值

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

技术细节

默认值：	没有任何
返回值：	一个字符串，表示元素边框的样式
CSS版本	CSS1

更多示例

示例

更改 <div> 元素的四个边框的样式：

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

亲自试一试 »

示例

返回 <div> 元素的边框样式：

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

亲自试一试 »

示例

所有不同值的演示：

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

亲自试一试 »

相关页面

CSS教程：CSS 边框

CSS 参考：边框样式属性

HTML DOM 参考：边境属性

❮上一节 ❮ 样式对象参考下一节❯