はじめに
以下のようなHTML（とCSS）を書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title></title>
<style type="text/css">
<!--
td {border: 2px solid;}
//-->
</style>
</head>
<body>
<table>
<tr>
<td>セル１１</td>
<td>セル１２</td>
<td>セル１３</td>
</tr>
<tr>
<td>セル２１</td>
<td>セル２２</td>
<td>セル２３</td>
</tr>
<tr>
<td>セル３１</td>
<td>セル３２</td>
<td>セル３３</td>
</tr>
</table>
</body>
</html>
ブラウザで表示するとこんな感じ 
セルの間に隙間があるので、tableタグにstyleをあてて、隙間を消しましょう。
<table style="border-spacing: 0px;">
そうすると、こんな感じ
はい、セル同士がくっついた結果、borderもくっついて、太く見えるようになってしまいました 
これをCSSで解決していきます。
おことわり
デザイナーさんにとっては朝飯前だと思うのですが、個人的には、初めて知った時にものすごく感動したんです・・・。
あと、普通はreset.css的なものを適用するので、素のHTMLにCSSを当て込むことはほとんどないと思います。
１．縦のborderを細くする
この状態からまずは縦のborderを細くしましょう。
セルが隣り合っている部分で太く見えてしまっているので、セル１１やセル２１、セル１２の右側のborderを外してみます。
というわけで、以下のCSSを追記。
td {
border: 2px solid;
border-right: 0px; /* 追記箇所 */
}
縦のborderがすっきりしましたね
しかし、一番右側のセル１３やセル２３の右borderまで消えてしまいました・・・（当然ですけどね）。
２．横のborderを細くする
消えた右borderのことはいったん置いといて、横borderの対応をします。
横borderもセルの隣接部分が太く見えてしまっているので、セル１１やセル２１の下borderを外すように以下のCSSを追記 
td {
border: 2px solid;
border-right: 0px;
border-bottom: 0px; /* 追記箇所 */
}
はい、横borderもすっきりしました
ただし、縦borderを対応したとき同様、セル３１やセル３２の下borderも消えています（そういうCSSを書いてるので当然）。
３－１．消えたborderを適用しなおす
適用しなおすborderと、対象のセルを整理します。
・右borderをつけたい 
セル１３、セル２３、セル３３
・下borderをつけたい セル３１、セル３２、セル３３
これをもとに、borderを適用していきます。
・・・はい、これできれいになりました
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title></title>
<style type="text/css">
<!--
td {
border: 2px solid;
border-right: 0px;
border-bottom: 0px;
}
//-->
</style>
</head>
<body>
<table style="border-spacing: 0px;">
<tr>
<td>セル１１</td>
<td>セル１２</td>
<td style="border-right: 2px solid;">セル１３</td>
</tr>
<tr>
<td>セル２１</td>
<td>セル２２</td>
<td style="border-right: 2px solid;">セル２３</td>
</tr>
<tr>
<td style="border-bottom: 2px solid;">セル３１</td>
<td style="border-bottom: 2px solid;">セル３２</td>
<td style="border-right: 2px solid; border-bottom: 2px solid;">セル３３</td>
</tr>
</table>
</body>
</html>
・・・きれいになったけどね？
ちょっとこれは、美しくない
この方法だと、一番右のtdタグと一番下のtdタグだけに別のCSSを当てないといけないです。
（HTMLの中に直接CSSを書いているのは、一旦置いといて
）
それに、tdタグの数が縦・横で可変だと、適用させたいtdタグがわからなくなります。
３－２．tableタグにborderをつける
では、美しくborderを適用し直すにはどうしたらいいか。
tableタグのborderを使えばいいのです
この状態のtableタグに
こうしてborderのスタイルを追加すると・・・
<table style="border-spacing: 0px; border: 2px solid #FF6600;">
このように、table全体がborderで囲まれました。
※わかりやすくするために、オレンジ色のスタイルを適用しています。
あとは、２重になってしまった上と左を消します。
やっつけ感ありますが、とりあえず「上と左を消す＝右と下だけ適用する」ようにスタイルを書き換えます
※オレンジの色指定も外しました。
<table style="border-spacing: 0px; border-right: 2px solid; border-bottom: 2px solid;">
できました
最終的に出来上がったHTML/CSS
HTML部分がとてもすっきりしました。
CSS部分はもう少しリファクタリングできそうですが、今日のところはこの辺で。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title></title>
<style type="text/css">
<!--
td {
border: 2px solid;
border-right: 0px;
border-bottom: 0px;
}
table {
border-right: 2px solid;
border-bottom: 2px solid;
}
//-->
</style>
</head>
<body>
<table style="border-spacing: 0px;">
<tr>
<td>セル１１</td>
<td>セル１２</td>
<td>セル１３</td>
</tr>
<tr>
<td>セル２１</td>
<td>セル２２</td>
<td>セル２３</td>
</tr>
<tr>
<td>セル３１</td>
<td>セル３２</td>
<td>セル３３</td>
</tr>
</table>
</body>
</html>