1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: border-color
slug: Web/CSS/border-color
tags:
- CSS
- CSS 境界
- CSS プロパティ
- CSS スタイル
- HTML 色
- リファレンス
- Styling HTML
- border-color
- 境界
- 色
- recipe:css-shorthand-property
browser-compat: css.properties.border-color
translation_of: Web/CSS/border-color
---
{{CSSRef}}
**`border-color`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)を行う [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の色を設定します。
{{EmbedInteractiveExample("pages/css/border-color.html")}}
各辺を個々に設定する場合は、 {{CSSxRef("border-top-color")}}、 {{CSSxRef("border-right-color")}}、 {{CSSxRef("border-bottom-color")}}、 {{CSSxRef("border-left-color")}}、 または書字方向を意識した{{CSSxRef("border-block-start-color")}}、 {{CSSxRef("border-block-end-color")}}、 {{CSSxRef("border-inline-start-color")}}、 {{CSSxRef("border-inline-end-color")}} を使用します。
境界線の色についての詳細な情報は、 {{SectionOnPage("/ja/docs/Web/HTML/Applying_color", "Borders")}} にあります。
## 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
- [`border-bottom-color`](/ja/docs/Web/CSS/border-bottom-color)
- [`border-left-color`](/ja/docs/Web/CSS/border-left-color)
- [`border-right-color`](/ja/docs/Web/CSS/border-right-color)
- [`border-top-color`](/ja/docs/Web/CSS/border-top-color)
## 構文
```css
/* <color> 値 */
border-color: red;
/* 水平線 | 垂直線 */
border-color: red #f015ca;
/* 上辺 | 垂直線 | 下辺 */
border-color: red rgb(240,30,50,.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 つ**指定された場合、それぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。
### 値
- {{CSSxRef("<color>")}}
- : 境界線の色を定義します。
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Complete_border-color_usage">完全な border-color の使用法</h3>
#### 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;
}
```
#### 結果
{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 境界線の色関係の CSS プロパティ: {{CSSxRef("border")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}},
- その他の境界線に関する CSS プロパティ: {{CSSxRef("border-width")}}, {{CSSxRef("border-style")}}
- {{CSSxRef("<color>")}} データ型
- その他の色に関するプロパティ: {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}
- [CSS を使用した HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color)
|
