border-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

border-color CSS 簡寫屬性可以設定元素邊框的顏色。

嘗試一下

border-color: red;

border-color: red #32a1ce;

border-color: red rgb(170 50 220 / 0.6) green;

border-color: red yellow green hsl(60 90% 50% / 0.8);

border-color: red yellow green transparent;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    這是一個周圍有邊框的方塊。
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #000;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

每個邊都可以使用 border-top-color、border-right-color、border-bottom-color 和 border-left-color 單獨設定；或使用感知書寫模式的 border-block-start-color、border-block-end-color、border-inline-start-color 和 border-inline-end-color。

你可以在使用 CSS 為 HTML 元素上色中找到更多關於邊框顏色的資訊。

組成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

css
/* <color> 值 */
border-color: red;

/* 上下 | 左右 */
border-color: red #f015ca;

/* 上 | 左右 | 下 */
border-color: red rgb(240 30 50 / 70%) green;

/* 上 | 右 | 下 | 左 */
border-color: red yellow green blue;

/* 全域值 */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

border-color 屬性可使用一、二、三或四個值來指定。

  • 當指定一個值時，它會將相同的顏色應用於全部四個邊。
  • 當指定兩個值時，第一個顏色應用於上下，第二個應用於左右。
  • 當指定三個值時，第一個顏色應用於上，第二個應用於左右，第三個應用於下。
  • 當指定四個值時，顏色會依序（順時針）應用於上、右、下和左。

值

<color>

定義邊框的顏色。

形式定義

預設值as each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
繼承與否no
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

形式語法

border-color = 
  [ <color> | <image-1D> ]{1,4}  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

範例

border-color 的完整用法

HTML

html
<div id="justone">
  <p><code>border-color: red;</code> 等同於</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> 等同於</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> 等同於</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> 等同於</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

CSS

css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/* 為所有 div 設定寬度和樣式 */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

結果

規範

Specification
CSS Logical Properties and Values Level 1
# logical-shorthand-keyword
CSS Backgrounds and Borders Module Level 3
# border-color

瀏覽器相容性

參見