今回のCSS

わくせん！

ではまず基礎的な所から。
枠線に付与できるプロパティとしては
【色】【太さ】【スタイル】の３つが存在しています。

線の色を指定するには

これは背景色とか文字色と同様、カラーコードでの指定ができます。

線の太さを指定するには

基本、px指定で行いますが、emなどでの指定もできます。emの場合は文字の高さが基準となります。

線のスタイルって？

borderの指定方法について

marginやpaddingと同じように上下左右違った色等の指定方法は可能ですが
margin : 10px 5px 20px 30px のように一度に指定することはできません。
その為違う場合はそれぞれ別途指定する方法があります。

.testClass
{
  /** 上下左右同じ指定 **/
  border-color:#FF0000;
  border-style:solid;
  border-width:10px;

  /** 上だけの指定 **/
  border-top-color:#FF0000;
  border-top-style:solid;
  border-top-width:10px;

  /** 下だけの指定 **/
  border-bottom-color:#FF0000;
  border-bottom-style:solid;
  border-bottom-width:10px;

  /** 左だけの指定 **/
  border-left-color:#FF0000;
  border-left-style:solid;
  border-left-width:10px;

  /** 右だけの指定 **/
  border-right-color:#FF0000;
  border-right-style:solid;
  border-right-width:10px;
}

なっが

実際にコーディングする場合は上記記述方法はせず、もっと簡略に書きます。
兎に角、borderには3つの指定がいりますよ！といった事を伝えたかったのです。

.testClass
{
  /** 上下左右同じ指定 **/
  border:【太さ】【カラーコード】【スタイル】;

  /** 上だけの指定 **/
  border-top:【太さ】【カラーコード】【スタイル】;

  /** 下だけの指定 **/
  border-bottom:【太さ】【カラーコード】【スタイル】;

  /** 左だけの指定 **/
  border-left:【太さ】【カラーコード】【スタイル】;

  /** 右だけの指定 **/
  border-right:【太さ】【カラーコード】【スタイル】;

  ※【太さ】【カラーコード】【スタイル】は指定順不問です。
  　【スタイル】【太さ】【カラーコード】とかでもOkです。好み
}

こんな感じで基本的には１行ですませています。
tableの時は結構枠線がバラバラだったりするので少し手間です。

練習問題的な