border-left-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-left-colorCSS のプロパティで、要素の左側の境界線の色を設定します。一括指定プロパティの border-color または border-left でも設定することができます。

試してみましょう

構文

css
/* <color> 値 */
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255 0 0);
border-left-color: hsl(100deg 50% 25% / 75%);
border-left-color: currentcolor;
border-left-color: transparent;

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

border-left-color プロパティは 1 つの値で指定します。

<color>

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

公式定義

初期値currentcolor
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値色の計算値
アニメーションの種類

形式文法

border-left-color = 
<color> |
<image-1D>

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

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

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

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

境界線が付いた単純な div

HTML

html
<div class="my-box">
  <p>
    これは周囲に境界線があるボックスです。 なお、ボックスのその辺が<span class="red-text"></span>になっています。
  </p>
</div>

CSS

css
.my-box {
  border: solid 0.3em gold;
  border-left-color: red;
  width: auto;
}

.red-text {
  color: red;
}

結果

仕様書

Specification
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-left-color

Legend

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

Full support
Full support

関連情報