CSS辞典 border-color、border-top-color、border-right-color、border-bottom-color、border-left-colorプロパティの解説

ボーダーの色をまとめて指定する「border-colorプロパティ」、上辺のボーダー色を指定する「border-top-colorプロパティ右辺のボーダーを指定する「border-right-colorプロパティ」、下辺のボーダーを指定する「border-bottom-colorプロパティ」、左辺のボーダーを指定する「border-left-colorプロパティの使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値currentcolor
適用される要素すべての要素
モジュールBackgrounds and Borders Module Level3
継承なし

※border-color、border-top-color、border-right-color、border-left-color、border-bottom-colorすべて同様。

border-colorプロパティ

概要・使用方法

{ border-color: -top -right -bottom -left;}

指定できる値はborder-widthのtop、right、bottom、leftのプロパティと同様です。それぞれ半角スペースで区切って指定します。4つまで指定できます、左から順に上辺、右辺、下辺、左辺の順に適用されます。省略した場合は次のようになります。

値が1つ上右下左にすべて同じ値を指定します。
値が2つ1つ目が上下、2つ目の値が左右に適用されます。
値が3つ1つ目が上、2つ目が左右、3目が下に適用されます。

指定可能な色

キーワード、カラーコード、rgb()、rgba()、hsl()、hsla()によるHSLカラー等の色を指定できます。

詳しい色の指定は以下を参照

border-colorプロパティでもcolorプロパティと同様に、RGB値による指定のほか、HSL値にょる指定、及び透明度のアルファ値を加えたRGBA値またはHSLA値での指定を利用できます。また、キーワードとして、「transparent」と「currentColor」を指定できます。

border-top-colorプロパティ

上辺のボーダーの色を指定できます。

概要・使用方法

{ border-top-color: 色;}

border-right-colorプロパティ

右辺のボーダーの色を指定できます。

概要・使用方法

{ border-right-color: 色;}

border-bottom-colorプロパティ

下辺のボーダーの色を指定できます。

概要・使用方法

{ border-bottom-color: 色;}

border-left-colorプロパティ

左辺のボーダーの色を指定できます。

概要・使用方法

{ border-left-color: 色;}

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>border-colorプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
           .disp{display:inline-block;margin:0.5em;}
           .box-style{
               width: 20em;
               height: 5em;
               margin:0.5em;
               background-color:lightsteelblue;
               border-style:solid;
               border-width:0.5em;
           }
           
           .style-top{
               border-top-color:red;
           }
           .style-right{
               border-right-color:red;
           }
           .style-bottom{
               border-bottom-color:red;
           }
           .style-left{
               border-left-color:red;
           }
           .style-border{
               border-color:red purple lime yellow;
           }
           
    </style>
  </head>
  <body>
      <div class="disp">
      <div class="box-style style-top">top</div>
      <div class="box-style style-right">right</div>
      <div class="box-style style-bottom">bottom</div>
      <div class="box-style style-left">left</div>
      <div class="box-style style-border">border</div>
      </div>
  </body>
</html>
top
right
bottom
left
border

chromeブラウザ実行結果

chrome

Firefox ブラウザ実行結果

Firefox

edgeブラウザ実行結果

edge

operaブラウザ実行結果

opera