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 屬性

實例

例子 1

為 <div> 元素添加實心邊框：

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

親自試一試

例子 2

更改 <div> 元素的四個邊框的樣式：

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

親自試一試

例子 3

返回 <div> 元素的邊框樣式：

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

親自試一試

例子 4

對所有不同值的演示：

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

親自試一試

語法

返回 borderStyle 屬性：

object.style.borderStyle

設置 borderStyle 屬性：

object.style.borderStyle = value
值 描述
none 定義無邊框。默認。
hidden 與 "none" 相同，但在解決表格元素的邊框沖突中除外。
dotted 定義點狀邊框。
dashed 定義虛線邊框。
solid 定義實心邊框。
double 定義兩個邊界。兩個邊框的寬度與 border-width 的值相同。
groove 定義 3D 凹槽邊框。效果取決于 border-color 的值。
ridge 定義 3D 脊狀邊界。效果取決于 border-color 的值。
inset 定義 3D inset 邊框。效果取決于 border-color 的值。
outset 定義 3D outset 邊框。效果取決于border-color的值。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： 無
返回值： 字符串，表示元素邊框的樣式。
CSS 版本： CSS1

瀏覽器支持

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