CSS border-color 屬性 · W3School CSS 參考手冊

# CSS border-color 屬性 ## 實例設置 4 個邊框的顏色： ``` p { border-style:solid; border-color:#ff0000 #0000ff; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 border-color 屬性。注釋：Internet Explorer 6（以及更早的版本）不支持屬性值 "transparent"。注釋：IE7 以及更早版本的瀏覽器不支持值 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。 ## 定義和用法 border-color 屬性設置四條邊框的顏色。此屬性可設置 1 到 4 種顏色。 border-color 屬性是一個簡寫屬性，可設置一個元素的所有邊框中可見部分的顏色，或者為 4 個邊分別設置不同的顏色。請看下面的例子： #### 例子 1 ``` border-color:red green blue pink; ``` * 上邊框是紅色 * 右邊框是綠色 * 下邊框是藍色 * 左邊框是粉色 #### 例子 2 ``` border-color:red green blue; ``` * 上邊框是紅色 * 右邊框和左邊框是綠色 * 下邊框是藍色 #### 例子 3 ``` border-color:dotted red green; ``` * 上邊框和下邊框是紅色 * 右邊框和左邊框是綠色 #### 例子 4 ``` border-color:red; ``` * 所有 4 個邊框都是紅色要記住，邊框的樣式不能為 none 或 hidden，否則邊框不會出現。注釋：請始終把 border-style 屬性聲明到 border-color 屬性之前。元素必須在您改變其顏色之前獲得邊框。 | 默認值： | _not specified_ | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.borderColor="#FF0000 blue" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | *color_name* | 規定顏色值為顏色名稱的邊框顏色（比如 red）。 | | *hex_number* | 規定顏色值為十六進制值的邊框顏色（比如 #ff0000）。 | | *rgb_number* | 規定顏色值為 rgb 代碼的邊框顏色（比如 rgb(255,0,0)）。 | | transparent | 默認值。邊框顏色為透明。 | | inherit | 規定應該從父元素繼承邊框顏色。 | ## TIY 實例 [設置四個邊框的顏色](/tiy/t.asp?f=csse_border-color) 本例演示如何設置四個邊框的顏色。可以設置一到四種顏色。 ``` <html> <head> <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> One-colored border! Two-colored border! Three-colored border! Four-colored border! 注釋："border-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設置邊框。 </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 邊框](/css/css_border.asp "CSS 邊框") HTML DOM 參考手冊：[borderColor 屬性](/jsref/prop_style_bordercolor.asp "HTML DOM borderColor 屬性")