border-color

簡寫屬性語法:

border-color<color>{1,4}

預設值看每個獨立屬性

適用於:所有元素

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

分拆獨立屬性語法:

border-*-color<color>

border-*-color = border-top-color,border-right-color,border-bottom-color,border-left-color

預設值currentColor

適用於:所有元素

繼承性:無

動畫性:是

計算值:指定值

媒 體:視覺

取值:

<color>
指定顏色。

說明:

定義元素的邊框顏色。
  • border-color如果提供全部四個參數值,將按上、右、下、左的順序作用於四邊;只提供一個,將用於全部的四邊;提供兩個,第一個用於上、下,第二個用於左、右;提供三個,第一個用於上,第二個用於左、右,第三個用於下。
  • 如果border-width等於0border-style設定為none | hiddenborder-color及其分拆獨立屬性將失效。
  • 如果 border-color 未被定義,邊框顏色將預設取目前最近的文字顏色,即 currentColor

    舉個例子:

    .demo { border: 5px solid; } <div class="demo"> <p class="text">邊框色未被定義時,邊框色與最近的文字色相同</p> </div>

    這個例子中,只定義了一個 5px 的實線框而未定義顏色,此時,邊框色將會取文字色來使用,所以大家將會看到一個黑色的邊框

  • 對應的腳本特性分別為:borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
RGBA, HSL, HSLA 8.0 #1
9.0+
  1. 需要注意的是,邊框顏色如果設定了不支援的值,則效果等同於預設值 currentColor

示例: