枠線の色指定
border-top-color：色指定 上の枠線の色 border-bottom-color：色指定 下の枠線の色 border-left-color：色指定 左の枠線の色 border-right-color：色指定 右の枠線の色 border-color：色指定 上・下・左・右 一括枠線の色 これらのプロパティは、枠線の色を指定します。
「border-color」を指定すると、上下左右の枠線を一度に設定することができます。その場合、値を半角スペースで区切って指定しますが、与えられた値の個数によって、次のように枠線の色が指定されます。
値が１つの場合 値１→上下左右 値が２つの場合 値１→上下 値２→左右 値が３つの場合 値１→上 値２→左右 値３→下 値が４つの場合 値１→上 値２→右 値３→下 値４→左 なお、この値の初期値は、「color：色指定」で設定されている値となります。
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>枠線の色を指定する</title>
<style type="text/css">
<!--
body { margin: 2em }
p {
text-align: center;
font-weight: bold;
padding: 1em;
border: solid 6px;
}
#sample1 { border-color: #ff3300 }
#sample2 { border-color: #ffcc00 }
#sample3 { border-color: #339933 }
#sample4 { border-color: #333399 }
#sample5 {
border-top-color: #339933;
border-bottom-color: #ff3300;
border-left-color: #333399;
border-right-color: #ffcc00
}
-->
</style>
</head>
<body>
<p id="sample1">border-color: #ff3300</p>
<p id="sample2">border-color: #ffcc00</p>
<p id="sample3">border-color: #339933</p>
<p id="sample4">border-color: #333399</p>
<p id="sample5">上：#339933 下：#ff3300 左：#333399 右：#ffcc00</p>
</body>
</html>
