CSSで枠線を表示する

CSSで枠線を表現したいとき、borderプロパティを使用します。
border-widthで線の太さ、border-styleで線の種類、
border-colorで枠線の色をそれぞれ指定できますが、
borderで、一括で指定すると便利です。

.sample {
border:solid 1px #FF0000;
}

サンプルです。サンプルです。

また枠線を上、下、左、右で個別に指定したい場合は、
それぞれborder-top,border-bottom,border-left,border-right
というように指定します。

.sample1 {
border-left:solid 2px #0000FF;
}

.sample2 {
border-bottom:dashed 1px #FF6600;
}

サンプルです。サンプルです。

サンプルです。サンプルです。

枠線の種類についてですが、ブラウザによって表示の仕方が違うものがあります。

特にgroove,ridge,inset,outsetに関してIEでは正しく表現されないので、
使用する場合には注意が必要です。
また、dotted,dashedに関してもIEとFirefoxなどとでは表示が少し異なるので、
どうしても同じ表現にしたい場合は、背景画像で指定したほうが良いかと思います。