上下左右のボーダーの色一括でを指定します。
（ボーダーの線を個別で指定したい場合はこちら！）
値が1つだけの場合、上下左右同じ値が指定されますが、
2〜4個設定したい場合は半角スペースで区切って並べます。
並べる個数によって適応される位置が違いますので
その違いを示したものが下の表となります。
※個数が増えると値が適応される箇所が変わりますので注意してください。
| ★ | 上下左右同じ値が設定されます。 |
| ★ ★ | 上下、左右に分けて値がそれぞれに設定されます。 |
| ★ ★ ★ | 上、左右、下の順番で値がそれぞれに設定されます。 |
| ★ ★ ★ ★ | 上、右、下、左の順番で値がそれぞれに設定されます。 |
上の表の違いを実際に表したのがこちらになります。
ここをクリック！
ボーダーは種類の初期値が「none（非表示）」のため、色を指定しただけでは
ボーダーは表示されません。（種類についてはこちらを見てください。）
値は次の二つのどちらかを選びます。
|
| 例 | CSS .sample1 { border-style: solid; width: 300px; border-color:#ff0000; } .sample2 { border-style: solid; width: 300px; border-color:#ff0000 #0000ff; } .sample3 { border-style: solid; width: 300px; border-color:#ff0000 #0000ff #008000; } .sample4 { border-style: solid; width: 300px; border-color:#ff0000 #0000ff #008000 #ffcc00; } |
XHTML <div class="sample1"> <p> 上下左右に赤を指定しました。 <⁄p> <⁄div> <div class="sample2"> <p> 上下に赤、左右に青を指定しました。 <⁄p> <⁄div> <div class="sample3"> <p> 上に赤、左右に青、下に緑を指定しました。 <⁄p> <⁄div> <div class="sample4"> <p> 上に赤、右に青、下に緑、左に黄色を指定しました。 <⁄p> <⁄div> |
|---|
これをXHTMLとCSSで書いた場合はこうなります。
ここをクリック！