おしゃれな区切り線（ボーダー・罫線）にする CSS デザインサンプル

<hr> デザインサンプル

最初に <hr> のデザインサンプルです。

デフォルトの状態

何も指定していないデフォルトの状態だと、少し立体的なデザインになっています（ブラウザによって見え方が異なります）。

<hr>

立体感をなくす場合

立体感をなくして任意のカラー（ background-color ）を指定する場合、以下のように border を削れば OK です。

hr {
	background-color: #000;
	border: none;
	height: 1px;
}

立体感を演出する場合

水平線を背景に埋め込んだように見せる場合、box-shadow で 1 px の白い影を追加します。

hr {
	background-color: rgba(0,0,0,.1);
	border: none;
	box-shadow: 0 1px 0 rgba(255,255,255,1);
	height: 1px;
}

背景色が濃い場合、background-color と box-shadow の値を調整してください。

hr {
	background-color: rgba(0,0,0,1);
	border: none;
	box-shadow: 0 1px 0 rgba(255,255,255,.1);
	height: 1px;
}

rgba の透過度（ 4 つ目の数値）を変更するだけなので簡単ですね。

<li> デザインサンプル

リストタグ <ul> や <ol> の区切り線も、box-shadow を使って演出できます。

背景色が薄い場合

背景色が薄い場合は、以下のように指定します。

li {
	border-bottom: 1px solid rgba(0,0,0,.1);
	box-shadow: 0 1px 0 rgba(255,255,255,1);
}

背景色が濃い場合

背景色が濃い場合は、以下のように指定します。

li {
	border-bottom: 1px solid rgba(0,0,0,1);
	box-shadow: 0 1px 0 rgba(255,255,255,.1);
}

背景に画像を敷いたり他の色を使う場合は、border と box-shadow の透過度を調整してみてください。

<li> 以外の要素でも問題なく使えます。

まとめ

ブログの装飾は、記事を読みやすくするためのものです。過度な装飾で読みづらくなってしまわないよう注意し、さりげなく演出してみてください。

ほかにも CSS デザインサンプルを紹介していますので、ご参考になれば幸いです。

• 強調文字 <strong> の CSS デザインサンプル
• テキストリンク <a> の CSS デザインサンプル
• 打ち消し線 <del> の CSS デザインサンプル
• おしゃれなボックス（囲み枠）の CSS デザインサンプル