border-color
============

**`border-color`** は一括指定を行う CSS のプロパティで、要素の境界の色を設定します。

試してみましょう
--------

各辺を個々に設定する場合は、 `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 colors にあります。

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `border-bottom-color`
* `border-left-color`
* `border-right-color`
* `border-top-color`
構文
--


```css
/\* <color> 値 \*/
border-color: red;

/\* 水平線 | 垂直線 \*/
border-color: red #f015ca;

/\* 上辺 | 垂直線 | 下辺 \*/
border-color: red rgb(240, 30, 50, 0.7) green;

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

/\* グローバル値 \*/
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: unset;
```


`border-color` プロパティは 1 ～ 4 つの値を使って指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じ色が適用される。
* 値が **2 つ**指定された場合、1 つ目の色は**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目の色**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、それぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。
### 値

`<color>`

境界線の色を定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-color`: `currentcolor`
* `border-right-color`: `currentcolor`
* `border-bottom-color`: `currentcolor`
* `border-left-color`: `currentcolor`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-color`: 色の計算値
* `border-left-color`: 色の計算値
* `border-right-color`: 色の計算値
* `border-top-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-bottom-color`: 色
* `border-left-color`: 色
* `border-right-color`: 色
* `border-top-color`: 色
 |

形式文法
----
```

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> is equivalent to</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> is equivalent to</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> is equivalent to</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> is equivalent to</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 |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 境界線の色関係の CSS プロパティ: `border`, `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color`,
* その他の境界線に関する CSS プロパティ: `border-width`, `border-style`
* `<color>` データ型
* その他の色に関するプロパティ: `color`, `background-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* CSS を使用した HTML の要素への色の適用