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-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 の色にあります。
構成要素のプロパティ
このプロパティは以下の 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
プロパティは 1 ~ 4 つの値を使って指定することができます。
- 値が 1 つ指定された場合、全 4 辺に同じ色が適用される。
- 値が 2 つ指定された場合、1 つ目の色は上下、2 つ目は左右の辺に適用される。
- 値が 3 つ指定された場合、1 つ目の色上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つ指定された場合、それぞれ上、右、下、左の順(時計回り)に適用される。
値
<color>
-
境界線の色を定義します。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
例
完全な 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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 境界線の色関係の 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
, andcolumn-rule-color
- CSS を使った HTML の要素への色の適用