CSSでリストなどへの罫線の付け方

リストなどでborderプロパティで上下や左右、中間に罫線を付けると、リスト間の線が二重になってしまいますが、二重にならないように罫線を付ける方法をご紹介します。

上下・中間に罫線を付ける

• sample
• sample
• sample
• sample
• sample

ul.sample li:first-child { border-top:1px solid #666; border-bottom:1px solid #666; } ul.sample li + li { border-bottom:1px solid #666; }

中間のみに罫線を付ける

• sample
• sample
• sample
• sample
• sample

ul.sample li + li { border-top:1px solid #666; }