スタイルシートリファレンス > border-color

スタイルシートリファレンス border-color


border-color ボーダー上下左右の色を指定する (IE4/N4)

ボーダー上下左右の色をまとめて指定します。

red のような色の名前か、RGB形式(#000000)で指定

red

rgb(0,255,0);

#0000ff


border-color:#0000ff;(上下左右#0000ff)

border-color:#0000ff #00ff00;(上下#0000ff 左右#00ff00)

border-color:#0000ff #00ff00 #ff0000;(上#0000ff 左右#00ff00 下#ff0000)

border-color:#0000ff #00ff00 #ff0000 #ffff00;(上#0000ff 右#00ff00 下#ff0000 左#ffff00)

▲ページ先頭へ

使用例 border-color

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
border-style: solid;
border-color: #0000ff;
}
.smp2 {
border-style: solid;
border-color: #0000ff #00ff00;
}
.smp3 {
border-style: solid;
border-color: #0000ff #00ff00 #ff0000;
}
.smp4 {
border-style: solid;
border-color: #0000ff #00ff00 #ff0000 #ffff00;
}
-->
</style>
</head>
<body>
<table class="smp1">
<tr>
<td>ボーダー 上下左右#0000ff</td>
</tr>
</table>
<br>
<table class="smp2">
<tr>
<td>ボーダー 上下#0000ff 左右#00ff00</td>
</tr>
</table>
<br>
<table class="smp3">
<tr>
<td>ボーダー 上#0000ff 左右#00ff00 下#ff0000</td>
</tr>
</table>
<br>
<table class="smp4">
<tr>
<td>ボーダー 上#0000ff 右#00ff00 下#ff0000 左#ffff00</td>
</tr>
</table>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


ボーダー 上下左右#0000ff

ボーダー 上下#0000ff 左右#00ff00

ボーダー 上#0000ff 左右#00ff00 下#ff0000

ボーダー 上#0000ff 右#00ff00 下#ff0000 左#ffff00

▲ページ先頭へ

関連項目【ボーダー】

border
ボーダー上下左右のスタイル・太さ・色を指定する
border-top
ボーダー上のスタイル・太さ・色を指定する
border-bottom
ボーダー下のスタイル・太さ・色を指定する
border-right
ボーダー右のスタイル・太さ・色を指定する
border-left
ボーダー左のスタイル・太さ・色を指定する
border-width
ボーダー上下左右の太さを指定する
border-top-width
ボーダー上の太さを指定する
border-bottom-width
ボーダー下の太さを指定する
border-right-width
ボーダー右の太さを指定する
border-left-width
ボーダー左の太さを指定する
border-style
ボーダー上下左右のスタイルを指定する
border-top-style
ボーダー上のスタイルを指定する
border-bottom-style
ボーダー下のスタイルを指定する
border-right-style
ボーダー右のスタイルを指定する
border-left-style
ボーダー左のスタイルを指定する
border-color
ボーダー上下左右の色を指定する
border-top-color
ボーダー上の色を指定する
border-bottom-color
ボーダー下の色を指定する
border-right-color
ボーダー右の色を指定する
border-left-color
ボーダー左の色を指定する

▲ページ先頭へ

スタイルシートリファレンス > border-color