border-top-color …… 上ボーダーの色を指定する
広告
border-top-colorプロパティは、上ボーダーの色を指定する際に使用します。
上下左右のボーダーの色をまとめて指定する際には、border-colorを使用してください。
■値
- 色
- #000000などの記述やカラーネームで色指定をします。
- transparent
- ボーダーの色を透明にします。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p {border-style: solid;}
p.sample1 {border-top-color: #0000ff;}
p.sample2 {border-top-color: red;}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>#0000ff</p>
<p class=”sample2″>red</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
#0000ff
red
■関連項目
border …… ボーダーのスタイル・太さ・色を指定する
border-color …… ボーダーの色を指定する
border-style …… ボーダーのスタイルを指定する
border-width …… ボーダーの太さを指定する
border-top …… 上ボーダーのスタイル・太さ・色を指定する
border-top-color …… 上ボーダーの色を指定する
border-top-style …… 上ボーダーのスタイルを指定する
border-top-width …… 上ボーダーの太さを指定する
border-bottom …… 下ボーダーのスタイル・太さ・色を指定する
border-bottom-color …… 下ボーダーの色を指定する
border-bottom-style …… 下ボーダーのスタイルを指定する
border-bottom-width …… 下ボーダーの太さを指定する
border-left …… 左ボーダーのスタイル・太さ・色を指定する
border-left-color …… 左ボーダーの色を指定する
border-left-style …… 左ボーダーのスタイルを指定する
border-left-width …… 左ボーダーの太さを指定する
border-right …… 右ボーダーのスタイル・太さ・色を指定する
border-right-color …… 右ボーダーの色を指定する
border-right-style …… 右ボーダーのスタイルを指定する
border-right-width …… 右ボーダーの太さを指定する
border-color …… ボーダーの色を指定する
border-style …… ボーダーのスタイルを指定する
border-width …… ボーダーの太さを指定する
border-top …… 上ボーダーのスタイル・太さ・色を指定する
border-top-color …… 上ボーダーの色を指定する
border-top-style …… 上ボーダーのスタイルを指定する
border-top-width …… 上ボーダーの太さを指定する
border-bottom …… 下ボーダーのスタイル・太さ・色を指定する
border-bottom-color …… 下ボーダーの色を指定する
border-bottom-style …… 下ボーダーのスタイルを指定する
border-bottom-width …… 下ボーダーの太さを指定する
border-left …… 左ボーダーのスタイル・太さ・色を指定する
border-left-color …… 左ボーダーの色を指定する
border-left-style …… 左ボーダーのスタイルを指定する
border-left-width …… 左ボーダーの太さを指定する
border-right …… 右ボーダーのスタイル・太さ・色を指定する
border-right-color …… 右ボーダーの色を指定する
border-right-style …… 右ボーダーのスタイルを指定する
border-right-width …… 右ボーダーの太さを指定する
広告