|
トップページ > スタイルシートリファレンス > border-color
★スタイルシートリファレンス
|
border-color･････ボーダーの色を指定する
     
 
   
 
border-colorプロパティは、上下左右のボーダーの色をまとめて指定する際に使用します。 上下左右を異なった色にしたい場合には、スペースで区切って複数の値を指定します。
■値
■使用例スタイルシート部分は外部ファイル（sample.css）に記述。p.sample1 {border-style: solid; border-color: red;}p.sample2 {border-style: solid; border-color: #ff0000;} p.sample3 {border-style: solid; border-color: #ff0000 #00ff00;} p.sample4 {border-style: solid; border-color: #ff0000 #00ff00 #0000ff;} p.sample5 {border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff;} HTMLソース<html><head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1">red</p> <p class="sample2">#ff0000</p> <p class="sample3">上下#ff0000、左右#00ff00</p> <p class="sample4">上#ff0000、左右#00ff00、下#0000ff</p> <p class="sample5">上#ff0000、右#00ff00、下#0000ff、左#ff00ff</p> </body> </html> ↓↓↓ ブラウザ上の表示red #ff0000 上下#ff0000、左右#00ff00 上#ff0000、左右#00ff00、下#0000ff 上#ff0000、右#00ff00、下#0000ff、左#ff00ff ■関連項目
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
|
©2008 HTMQ