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-top-colorborder-right-colorborder-bottom-colorborder-left-color、 または書字方向を意識したborder-block-start-colorborder-block-end-colorborder-inline-start-colorborder-inline-end-color を使用します。

境界線の色についての詳細な情報は、 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 プロパティは 1 ~ 4 つの値を使って指定することができます。

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

<color>

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

公式定義

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

形式文法

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報