枠線の形、太さを指定したい。

今回、触れるのは「border」プロパティです。コンテンツ領域と
前回の記事で紹介した「padding」の「外側」を囲む４辺です。

borderは線を表すので、太さ、色、形を指定することができます、
borderに関連するプロパティは以下の通りです。

プロパティ
border-style-top　上の枠線を表示
border-style-bottom　下の枠線を表示
border-style-left　左に枠線を表示
border-style-right　右に枠線を表示
border-style　上下左右の枠線をまとめて表示する。

設定値
none　borderを表示しない。　ほかのセルが重なる時に、
　　　ほかのセルの値が優先。初期値
hidden　borderを表示しない。
　　　　ほかのセルが重なる時に、この値が優先。
dotted　点線
solid　実践
dashed　破線
double　二重線
groove　くぼんだ線
ridge　隆起した線
inset　内側にくぼんだ線
outset　内側が隆起した線

noneとhiddenの違いは、テーブルを作成したときにセル同士の
枠線が重なった場合の処理が異なる・・・確か。この辺りは
記憶が曖昧です。

borderの太さを設定したい

枠線の太さを指定するときは
「border-width-**」プロパティを使います。

プロパティ
border-width-top　上辺の線の太さ
border-width-bottom　下辺の線の太さ
border-width-left　左辺の線の太さ
border-width-right　右辺の線の太さ
border-width　４辺の線の太さ

設定値
数値　px
キーワード　「thin」,「medium」,「thick」が指定できます。

borderの色を指定したい

勘が良い方なら気づいたかと思います。
border-colorプロパティを使います。

設定値
色　#ff000やblue,green,yellowなどを指定します。
transparent　透明になります。

４辺をまとめて設定する。

長々と説明してきましたが、
「border」プロパティを使うと
四方まとめて設定できます。
例：「border:5px solid #ff0000」
これの意味は、幅5px 実線 赤色　という
意味です。私はこの書き方で書いています。
楽だからです。

上記を踏まえたサンプルコードを書きます。