CSSでborderの上手な使い方

CSSでborderをつかって囲みを表現する時ってよくあるんですが、たとえば以下みたいな場合、

上部のタイトル部分は画像をペタって置くかなんかして、その下のBOXはCSSで1pxの線を引くのが一般的かと思うんですが、まぁその時の書き方について、気がついた事があったのでメモ。

/* 四隅に1pxの線を引く */
.hoge{
	border:1px solid #ccc;
}

これが一番省略できる書き方。四隅に同じ条件の線を引く場合はこうやって書きます。

でも、上の画像のような場合は上部の線がいりません。こうした時は

/* 上以外に1pxの線を引く */
.hoge{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-left:1px solid #ccc;
}

こんな感じで書いていました。これは、右、下、左にそれぞれボーダーを指定してあげている形です。ただ、どうもしっくりこないですよね。自分はしっくり来ていませんでした。なんかあまりキレイな書き方じゃないなーってずっと思ってたんです。

そこで、先日ふと以下のような感じにしてみました。

.hoge{
	border:1px solid #ccc;　/* 四隅に1pxの線を引く */
	border-top:0;　/* 上の線だけ消す */
}

そしたらあら不思議ー！
しっかり上の線だけ消えました。

あー、これなら結構すっきり書けるなー。

もっと早くに気がつけば良かったです。

とまぁ、かなり細々した話ですが、個人的にはだいぶスッキリしました。（性的に）

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。