プロパティ名 | 値 | 説明 | 適用対象 | 継承 |
---|---|---|---|---|
border-top-color: | 色指定 | 上の枠線の色 | すべての要素 | なし |
border-bottom-color: | 色指定 | 下の枠線の色 | すべての要素 | なし |
border-left-color: | 色指定 | 左の枠線の色 | すべての要素 | なし |
border-right-color: | 色指定 | 右の枠線の色 | すべての要素 | なし |
border-color: | 色指定 | 上下左右の枠線の色 | すべての要素 | なし |
値 | 説明 | |
---|---|---|
色指定 | 色名又はカラーコード | 色名で指定するか、又は カラーコードで指定します。 |
border-color: | 枠線の色 |
border-color:値 | 上下左右 |
border-color:値 値 | 上下 左右 |
border-color:値 値 値 | 上下 左右 下 |
border-color:値 値 値 値 | 上 右 下 左 |
border-top-color, border-bottom-color, border-left-color, border-right-color,border-colorプロパティは、枠線の色を設定します。
値には、色名又はカラーーコードを指定します。border-colorを利用すると、上下左右の枠線の色を一度に設定することができます。
値を半角スペースで区切って指定しますが、与えられた値の個数によって、上記のように枠線の色が設定されます。
値には、色名又はカラーーコードを指定します。border-colorを利用すると、上下左右の枠線の色を一度に設定することができます。
値を半角スペースで区切って指定しますが、与えられた値の個数によって、上記のように枠線の色が設定されます。
サンプルソース
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
body{margin:0}
p{text-align:center;
font-size:1.0em;
background-color:#FFD700;
color:red;
width:500px;
margin-left:auto;
margin-right:auto;
border-width: 3px;
border-style:solid;
}
b{font-size:1.3em;
color:black;
}
#sampl01{border-color: 1black;}
#sampl02{border-color: green;}
#sampl03{border-color: red;}
#sampl04{border-color: #0000FF; }
#sampl05{border-color: #00FF00;}
#sampl06{border-color: #B22222 blue maroon magenta;}
-->
</style>
</head>
<body>
<p id="sampl01"><b>上下左右ボーダーカラー black</b>
日光東照宮(にっこうとうしょうぐう)は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl02"><b>上下左右ボーダーカラー green</b>
日光東照宮(にっこうとうしょうぐう)は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl03"><b>上下左右ボーダーカラー red</b>
日光東照宮(にっこうとうしょうぐう)は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl04"><b>上下左右ボーダーカラー #0000FF</b>
日光東照宮(にっこうとうしょうぐう)は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
<p id="sampl06"><b>上ボーダーカラー#B22222, 右ボーダーカラーblue, 下ボーダーカラーmaroon, 左ボーダーカラーmagenta</b>
日光東照宮(にっこうとうしょうぐう)は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。</p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"