HOME >> スタイルシート > 枠線の色を指定する

point 枠線の色を指定する

border-color:
指定できる値
RGB値で指定
#RRGGBBやRGB(n%、n%,n%)など
カラー名
redやblueなど
システムカラーで指定
値の指定方法個別に設定するプロパティ
値が一つ上下左右同じ設定border-top-color上のみ設定
値が二つ上下、左右の設定border-left-color左のみ設定
値が三つ上と左右と下の設定border-right-color右のみ設定
値が四つ上、右、下、左の順で設定border-bottom-color下のみ設定
枠線の色を設定するには、border-colorプロパティを使います。値はRGB値やカラー名で指定します。
この属性も前で説明した、border-styleプロパティのように値を半角のスペースで区切り複数指定することや、border-top-colorプロパティのような、よく似たプロパティで、上下左右それぞれについて枠線の色を設定することが出来ます。border-top-colorプロパティの場合は、上だけの枠線の色を指定できます。

なお、Netscape Navigator4.7で複数の値を設定した場合は、正しく表示されません。それと、border-top-colorプロパティなどを使って、それぞれの方向の枠線の色を指定することも出来ません。

サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

緑色の枠線です

オレンジの枠線です

上下がオレンジで、左右が緑色です

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P{ border-width: 5pt ;
   padding:4px;}
.test1 { border-style: solid; 
         border-color:green;}
.test2 { border-style: double; 
         border-color:orange;  }
.test3 { border-style: solid; 
         border-color:orange green;}
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">緑色の枠線です</P>
<P class="test2">オレンジの枠線です</P>
<P class="test3">
上下がオレンジで、左右が緑色です
</P> </BODY> </HTML>
Copyright ©2001〜2011 まさぼ〜 All Right Reserved