border（枠線）の形状・幅・色

borderスタイルはブロック要素周辺に枠線を付ける。子要素に継承しない。
■borderの形状の設定値
　none ･･･表示しない。これが初期値なので、borderの幅や色だけを指定しても枠線
　　　　　は表示されない。
　solid ･･･実線で描かれる
　dashed ･･･枠は破線で描かれる。
　dotted ･･･枠は点線で描かれる。
　double ･･･二重線
　　（2つの線幅と線間の合計がborder-widthとなる。border-widthは3ピクセル以上
　　　を指定しなければ二重線にならない。実線になってしまう。）
　groove ･･･ボーダー自体が立体的な溝になる。
　ridge ･･･ボーダー自体が立体的に隆起する。
　inset ･･･ボーダーで囲まれた範囲が立体的に凹んだように見える。
　outset ･･･ボーダーで囲まれた範囲が立体的に隆起したように見える。

■borderの幅の設定値
・(数値 + 単位)で指定･･･pt／px／cm／mmを指定できる
・キーワード指定
　　thin 　･･･細い
　　medium ･･･通常
　　thick 　･･･太い

■borderの色の設定値
・色値を設定（#ff6699や色名"red"など）
・＜transparent＞･･･透明、親要素の背景が透けて見える（初期値）

Sample

行が＜border-style＞、列が＜border-width＞

	thin	medium	thick	3mm
solid	Sample	Sample	Sample	Sample
double	Sample	Sample	Sample	Sample
groove	Sample	Sample	Sample	Sample
ridge	Sample	Sample	Sample	Sample
inset	Sample	Sample	Sample	Sample
outset	Sample	Sample	Sample	Sample
dotted	Sample	Sample	Sample	Sample
dashed	Sample	Sample	Sample	Sample

Sample Source......................................................................>>>

<table border="1" cellpadding="8" cellspacing="0" style="text-align:center">
    <tr style="color:navy"> 
      <td> 
        <div></div>
      </td>
      <td> 
        <div>thin</div>
      </td>
      <td> 
        <div>medium</div>
      </td>
      <td> 
        <div>thick</div>
      </td>
      <td> 
        <div>3mm</div>
      </td>
    </tr>
    <tr> 
      <td style="color:red">solid</td>
      <td><div style="border:solid thin #9900cc"> Sample </div></td>
      <td><div style="border:solid medium #660033"> Sample </div></td>
      <td><div style="border:solid thick green"> Sample </div></td>
      <td><div style="border:solid 3mm lightskyblue"> Sample </div></td>
    </tr>
    <tr> 
      <td style="color:red">double</td>
      <td><div style="border:double thin #9900cc"> Sample </div></td>
      <td><div style="border:double medium #660033"> Sample </div></td>
      <td><div style="border:double thick green"> Sample </div></td>
      <td><div style="border:double 3mm lightskyblue"> Sample </div></td>
    </tr>
    <tr> 
      <td style="color:red">groove</td>
      <td><div style="border:groove thin #9900cc"> Sample </div></td>
      <td><div style="border:groove medium #660033"> Sample </div></td>
      <td><div style="border:groove thick green"> Sample </div></td>
      <td><div style="border:groove 3mm lightskyblue"> Sample </div></td>
    </tr>
    <tr> 
      <td style="color:red">ridge</td>
      <td><div style="border:ridge thin #9900cc"> Sample </div></td>
      <td><div style="border:ridge medium #660033"> Sample </div></td>
      <td><div style="border:ridge thick green"> Sample </div></td>
      <td><div style="border:ridge 3mm lightskyblue"> Sample </div></td>
    </tr>
    <tr> 
      <td style="color:red">inset</td>
      <td><div style="border:inset thin #9900cc"> Sample </div></td>
      <td><div style="border:inset medium #660033"> Sample </div></td>
      <td><div style="border:inset thick green"> Sample </div></td>
      <td><div style="border:inset 3mm lightskyblue"> Sample </div></td>
    </tr>
                                <tr> 
      <td style="color:red">outset</td>
      <td><div style="border:outset thin #9900cc"> Sample </div></td>
      <td><div style="border:outset medium #660033"> Sample </div></td>
      <td><div style="border:outset thick green"> Sample </div></td>
      <td><div style="border:outset 3mm lightskyblue"> Sample </div></td>
    </tr>
                                <tr> 
      <td style="color:red">dotted</td>
      <td><div style="border:dotted thin #9900cc"> Sample </div></td>
      <td><div style="border:dotted medium #660033"> Sample </div></td>
      <td><div style="border:dotted thick green"> Sample </div></td>
      <td><div style="border:dotted 3mm lightskyblue"> Sample </div></td>
    </tr>
    <tr> 
      <td style="color:red">dashed</td>
      <td><div style="border:dashed thin #9900cc"> Sample </div></td>
      <td><div style="border:dashed medium #660033"> Sample </div></td>
      <td><div style="border:dashed thick green"> Sample </div></td>
      <td><div style="border:dashed 3mm lightskyblue"> Sample </div></td>
    </tr>
  </table>