文章の区切りを示す際とか、何かのデザインとかで、1本だけ線を引きたいことがあります。しかも細い線を。太さ1ピクセルの線を1本だけ横方向に引くにはどうすればいいか…。ボックスの枠線を活用する方法と、hr要素を装飾する方法があります。

方法1. ボックスの枠線として「1本線」を描画する

border-bottomプロパティとかを使って、「下側の枠線」として引くのが楽でしょう。線を引きたい箇所のすぐ上にある「ボックス」に対して枠線を1本だけ描画させる方法です。

例えば、以下のようなHTMLがあるとき…

<p class="box"> ほげほげ </p>

このボックス（段落）の下に1本だけ線を引くには、次のようにスタイルシートを記述するだけです。

p.box {
   border-bottom: 1px solid red;
}

これで、このボックスの下部に、太さ1ピクセルの細い実線（solid）が赤色（red）で表示されます。
実際に表示させると、以下のよーな感じで見えます。

点線を1本引きたいなら、「solid」の代わりに「dotted」を指定します。
すると、以下のように見えます。

破線なら「dashed」です。

IEで見ると、点線と破線は違いがないかも知れません。（太くすると違いが分かるのですが。）

内容と1本線の距離を調節したい場合は、padding-bottomプロパティを使います。padding-bottomプロパティは、下側の「内容と枠線との余白量」を調節するためのプロパティです。ここに望みのサイズを指定すれば、好きな間隔を設けられます。
以下のようなスタイルシートソースを書けばよいでしょう。

p.box {
   border-bottom: 1px solid red;
   padding-bottom: 15px; /* 内容と線との間隔量 */
}

上記の場合だと、15ピクセルの余白が設けられます。
これを表示すると、以下のような感じで見えます。

ちなみに、1本線じゃなくて、二重線を引くこともできます。ただし、その場合は、線の太さを「3px」と指定しなければなりません。（太さ1ピクセルの線が2本と、その線と線の間隔が1ピクセルで、合計「3px」。）
以下のようなスタイルシートソースを書きます。

p.box {
   border-bottom: 3px double green;
}

太さを「3px」にして、線種を「double」にしています。doubleというのはここでは「二重線」という線種を表しています。
これを表示してみると、以下のように見えます。

まあ、こんな感じで。線を引くのはスタイルシートによる装飾の基本と言えるでしょう。とっても簡単に記述できます。

方法2. 素直にhr要素を使う

HTMLには、区切りとして水平線を引くための要素があります。hr要素です。（※末尾に補足追記アリ）
以下のようにソースを書きます。

HTMLの場合：  <hr>
XHTMLの場合： <hr />

これだけで、横向きの線（水平線）が引けます。
しかし…。代表的なブラウザでは立体的な線が表示されてしまうので、フラットにデザインしたいときとかにはちょっと向いてないんですよね。あと、ブラウザによって微妙に見栄えが異なりますし。
そのまま、hr要素だけを使って表示させると、以下のような感じ。

ただ、hr要素そのものをスタイルシートで装飾することは可能です。
例えば、以下のような感じで。

hr {
   border-width: 1px 0px 0px 0px; /* 太さ */
   border-style: solid; /* 線種 */
   border-color: red; /* 線色 */
   height: 1px; /* 高さ */
}

これを実際に表示させると、以下のような感じ。

border-widthプロパティで値を「1px 0px 0px 0px」のように4つ指定しています。これは「上側にだけ1ピクセルの線を引き、あとは線を引かない」指定です。border-styleプロパティで線種を、border-colorプロパティで線色を指定しています。

最初から、border-topプロパティを使って指定すると早いと思いがちなんですが、hr要素に対して装飾する場合は、「明示的に0pxを指定する」必要があるようです。デフォルトで周囲に線が引かれているからでしょうね。（たぶん）

なお、最後にheightプロパティを使って高さを「1px」にしているのは、IE向けの記述です。IEの場合は、hr要素の線は「枠線」だとは解釈されていないようで、この記述が必要です。

（※IEだけを対象にするなら、heightで太さを指定し、colorで色を指定することができます。しかし、それ以外のブラウザでその方法は使えません。また、borderなどを使って「枠線」として装飾する方法だけでは、IEでうまく1本線になりません。従って、上記のソースのように両方の記述方法を同時に書いておく必要があります。）

破線にしたいなら「solid」ではなく「dashed」に、灰色にしたいなら「red」を「gray」に変えるだけです。

先ほどのボックスの枠線を活用する方法は、完全に「デザインとしての1本線」でしたが、hr要素を使えば「マークアップとしての区切り線」（＝文章構造としての区切り）を表現できます。従って、文章構造的に区切りを表現したい場面で使うのであれば、hr要素を使う方が望ましいと言えそうです。（※追記参照）

まあ、「デザインのみの目的で引く線」なのか、「区切りを表現するために引く線」なのかで使い分けると良いのではないでしょうか。