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プロパティの場合は、上だけの枠線の色を指定できます。

サンプル - Microsoft Internet Explorer

緑色の枠線です

オレンジの枠線です

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

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p{ border-width: 5px ;
   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>
 

スポンサード・リンク