メインメニュー


[スポンサードリンク]


枠線の色を指定する
border-top-color:色指定  ← 上の枠線の色
border-bottom-color:色指定  ← 下の枠線の色
border-left-color:色指定  ← 左の枠線の色
border-right-color:色指定  ← 右の枠線の色
border-color:色指定  ← 上・右・下・左の枠線の色

border-colorプロパティで、枠線の色を指定します。
border-top-color,border-bottom-color,border-left-color,border-right-colorプロパティでそれぞれの枠線の色を個別に指定することもできますし、border-colorプロパティでまとめて指定することもできます。
まとめて指定するときは、値を半角スペースで区切って指定しますが、値の数によって適用される枠線の色が変わります。
また初期値は、「color:色指定」で設定されている色となります。

値が1つのとき :上下左右に同一の色
  例)border-color:red;
値が2つのとき :上下、左右の色
  例)border-color:red blue;
値が3つのとき :上、左右、下の色
  例)border-color:red blue green;
値が4つのとき :上、右、下、左の色
  例)border-color:red blue green #ff00ff;


CSSで色を指定するときの方法は、下記の6種類があります。
(詳細は『色の指定方法』を御覧ください)
  • 16進数で指定 (#RRGGBB形式)
  • 16進数で指定 (#RGB形式)
  • 10進数で指定 (rgb(n,n,n)形式)
  • %で指定     (rgb(n%,n%,n%)形式)
  • 色名で指定
  • システムカラーで指定
色の指定は半角の英数字を使用します。
CSSでは、大文字・小文字の区別はありません。


上の枠線の色

border-top-color:#ffff66;

下の枠線の色

border-bottom-color:#99ff66;

左の枠線の色

border-left-color:#6699ff;

右の枠線の色

border-right-color:ff99cc;


<STYLE type="text/css">
<!--
P { border-style:solid; padding:0.5em; }
.case1 { border-top-color    : #ffff66; }
.case2 { border-bottom-color : #99ff66; }
.case3 { border-left-color   : #6699ff; }
.case4 { border-right-color  : #ff99cc; }
-->
</STYLE>

上の枠線の色
<P class="case1">border-top-color:#ffff66;</P>
下の枠線の色
<P class="case2">border-bottom-color:#99ff66;</P>
左の枠線の色
<P class="case3">border-left-color:#6699ff;</P>
右の枠線の色
<P class="case4">border-right-color:#ff99cc;</P>

値が1つのとき:上下左右に同一の色

border-color:red;

値が2つのとき:上下、左右の色

border-color:red blue;

値が3つのとき:上、左右、下の色

border-color:red blue yellow;

値が4つのとき:上、右、下、左の色

border-color:red blue yellow #ff00ff;


<STYLE type="text/css">
<!--
P { border-style:solid; padding:0.5em; }
.case11 { border-color : red; }
.case12 { border-color : red blue; }
.case13 { border-color : red blue yellow; }
.case14 { border-color : red blue yellow #ff00ff; }
-->
</STYLE>

値が1つのとき:上下左右に同一の色
<P class="case11">border-color:red;</P>
値が2つのとき:上下、左右の色
<P class="case12">border-color:red blue;</P>
値が3つのとき:上、左右、下の色
<P class="case13">border-color:red blue yellow;</P>
値が4つのとき:上、右、下、左の色
<P class="case14">border-color:red blue yellow #ff00ff;</P>