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;
}

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

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

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

none 線無し
solid 1本線
double 2重線
dotted 点線
dashed 破線
groove 窪んだように見えます
ridge 隆起しているように見えます
inset 立体的に窪んだように見えます
outset 立体的に隆起しているように見えます

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

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る