border(ボーダー)について

BOXの上・右・下・左に線の種類・線の太さ・線のカラーを設定するプロパティです。
ボーダーの設定方法はたくさんありますが、全部を一括する設定をおすすめします。

border(ボーダー)の概念図1

borderのブラウザ表示例

■CSS記述
.sample1 { border:3px solid #f00; }
■XHTML記述
<p class="sample1">サンプル</p>

サンプル

border-topのブラウザ表示例

■CSS記述
.sample2 { border-top:3px solid #f00; }
■XHTML記述
<p class="sample2">サンプル</p>

サンプル

border-rightのブラウザ表示例

■CSS記述
.sample3 { border-right:3px solid #f00; }
■XHTML記述
<p class="sample3">サンプル</p>

サンプル

border-bottomのブラウザ表示例

■CSS記述
.sample4 { border-bottom:3px solid #f00; }
■XHTML記述
<p class="sample4">サンプル</p>

サンプル

border-leftのブラウザ表示例

■CSS記述
.sample5 { border-left:3px solid #f00; }
■XHTML記述
<p class="sample5">サンプル</p>

サンプル

border(ボーダー)の設定方法

全部を一括設定
border: (線の太さ) (線の種類) (線のカラー);
カラーの一括設定
border-color: (値);
スタイルの一括設定
border-style: (値);
幅の一括設定
border-width: (値);
上のborder関連を一括設定
border-top: (値);
上のborderカラーを設定
border-top-color: (値);
上のborderスタイルを設定
border-top-style: (値);
上のborder幅を設定
border-top-width: (値);
右のborder関連を一括設定
border-right: (値);
右のborderカラーを設定
border-right-color: (値);
右のborderスタイルを設定
border-right-style: (値);
右のborder幅を設定
border-right-width: (値);
下のborder関連を一括設定
border-bottom: (値);
下のborderカラーを設定
border-bottom-color: (値);
下のborderスタイルを設定
border-bottom-style: (値);
下のborder幅を設定
border-bottom-width: (値);
左のborder関連を一括設定
border-left: (値);
左のborderカラーを設定
border-left-color: (値);
左のborderスタイルを設定
border-left-style: (値);
左のborder幅を設定
border-left-width: (値);

border(ボーダー)の値

値は色々とありますが、
テンプレートではpxとemを使用しています。
線の種類はsolidとdotted以外はほとんど利用しません。

width
em , ex , in , px , cm , mm , pt , pc , %
style
solid , dotted , double , groove , ridge , inset , outset , none
color
16進数のカラーコードやカラー名