Style borderColor 屬性

定義和用法

borderColor 屬性設置或返回元素邊框的顏色。

此屬性可以采用一到四個值：

  • 一個值，例如：p {border-color: red} - 所有四個邊框都是紅色
  • 兩個值，例如：p {border-color: red transparent} - 上下邊框為紅色，左右邊框為透明
  • 三個值，例如：p {border-color: red green blue}- 上邊框為紅色，左右邊框為綠色，下邊框為藍色
  • 四個值，例如：p {border-color: red green blue yellow} - 上邊框為紅色，右邊框為綠色，下邊框為藍色，左邊框為黃色

另請參閱：

CSS 教程：CSS 邊框

CSS 參考手冊：border-color 屬性

HTML DOM 參考手冊：border 屬性

實例

例子 1

將 <div> 元素的四個邊框的顏色更改為紅色：

document.getElementById("myDiv").style.borderColor = "red";

親自試一試

例子 2

將 <div> 元素的上下邊框的顏色更改為綠色，將左右邊框的顏色更改為紫色：

document.getElementById("myDiv").style.borderColor = "green purple";

親自試一試

例子 3

返回 <div> 元素的邊框顏色：

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

親自試一試

語法

返回 borderColor 屬性：

object.style.borderColor

設置 borderColor 屬性：

object.style.borderColor = "color|transparent|initial|inherit"

屬性值

值 描述
color

規定邊框的顏色。默認顏色為黑色。

請查看 CSS 顏色值，獲取可能的顏色值的完整列表。
transparent 邊框的顏色是透明的（底層內容會透出來）。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： black
返回值： 字符串，表示元素邊框的顏色。
CSS 版本： CSS1

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5