ボーダー色の設定
これらのプロパティは、ボーダー領域の色を指定します。
| 値 | <color> | transparent | inherit <color>は特定の色、transparentは透明を指定する |
|---|---|
| 初期値 | colorプロパティ値 |
| 適用可能な要素 | すべての要素 |
| 継承のデフォルト動作 | 継承しない |
| パーセンテージ値 | 指定不可 |
| メディアグループ | visual |
| 計算値 | colorプロパティ値を使う場合、colorプロパティ値の計算値。そうでなければ値で指定された通り |
border-colorはborder-top-color, border-right-color, border-bottom-color, border-left-colorのためのショートハンドプロパティです。
| 値 | [<color> | transparent ]{1,4} | inherit <color>は特定の色、transparentは透明を指定する |
|---|---|
| 初期値 | colorプロパティ値 |
| 適用可能な要素 | すべての要素 |
| 継承のデフォルト動作 | 継承しない |
| パーセンテージ値 | 指定不可 |
| メディアグループ | visual |
| 計算値 | colorプロパティ値を使う場合、colorプロパティ値の計算値。そうでなければ値で指定された通り |
1～4個の値を指定できますが、その意味は値の数によって異なります。
以下は1～4個の値がどのボーダー領域に適応されるかを示す表です。値1はリストの先頭の値を意味します。
| 値の数 | 値1 | 値2 | 値3 | 値4 |
|---|---|---|---|---|
| 1 | TOP RIGHT BOTTOM LEFT | - | - | - |
| 2 | TOP RIGHT BOTTOM | RIGHT LEFT | - | - |
| 3 | TOP | RIGHT LEFT | BOTTOM | - |
| 4 | TOP | RIGHT | BOTTOM | LEFT |
h1.test3 {
color:black;
background: white;
margin: 0px;
border-width: 20px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
padding: 0px;
}
上記のスタイルシートを、以下のHTMLで使うと、
<h1 class="test3">H1要素</H1>
次のように表示されます。
