ウェブサイト作成

ボーダー(border)

ボーダーの種類(border-style)

ボーダーは線種を選ぶことができます。しかし立体表現の色や破線の間隔などはブラウザによって異なります。特にInternet Explorerではボーダー解釈の間違いがありますので、他のブラウザと大きく変わってしまう場合があります。

下記に各線種を使ったボックスを作りました。赤色の背景色の上にピンク色の背景のボックスで各種類のオレンジ色の10ピクセルのボーダーが設定してあります。

solid:実線

dotted:点線

dashed:破線

double:二重線

groove:凹

ridge:凸

inset:枠の内側が凹

outset:枠の内側が凸

この他にborder-styleには枠線なしの"none"、枠線を非表示にする"hidden"、親要素のスタイルを継承する"inherit"があります。