border-color · CSS基礎

## border-color 屬性 ### 屬性定義及使用說明 border-color屬性屬性設置四條邊框的顏色,此屬性可設置 1 到 4 種顏色。 border-color 屬性是一個簡寫屬性，可設置一個元素的所有邊框中可見部分的顏色，或者為 4 個邊分別設置不同的顏色。請看下面的例子：實例: **border-color:紅，綠，藍,粉紅色;** * 上邊框是紅色 * 右邊框是綠色 * 底部邊框是藍 * 左邊框是粉紅色 **border-color：紅，綠，藍;** * 上邊框是紅色 * 左，右邊框是綠色 * 底部邊框是藍 **border-color：紅，綠;** * 頂部和底部邊框是紅色 * 左右邊框是綠色 **border-color：紅色;** * 所有四個邊框是紅色 **注意：**請始終把 border-style 屬性聲明到 border-color 屬性之前。元素必須在您改變其顏色之前獲得邊框。 JavaScript 語法:object object.style.borderColor="#FF0000 blue" ## 屬性值 | 值 | 說明 | | :-- | :-- | | *color* | 指定背景顏色。在[CSS顏色值](https://www.w3cschool.cn/cssref/css-colors-legal.html)查找顏色值的完整列表 | | transparent | 指定邊框的顏色應該是透明的。這是默認 | | inherit | 指定邊框的顏色，應該從父元素繼承 | ## [在線實例](https://www.w3cschool.cn/cssref/pr-border-color.html) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> 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-color" 屬性如果單獨使用則不起作用. 要先使用 "border-style" 屬性來設置 borders . </body> </html> ```