関連プロパティ

border-style

対応状況
N7.0 Win	N6.0 Win	e6.0 Win	e5.5 Win	e5.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
○	○	○	○	○	○	○	○	○

値	[ none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset ]{1,4} \| inherit
初期値	簡略化プロパティなので定義しない
適用	すべての要素
継承	しない
レベル	-
メディア	visual

四辺のボーダーの種類を一括指定します。

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'という4つのプロパティを一ヶ所で指定出来ます。'border'を用いて、これらをほかのプロパティと一括指定する事も出来ます。ただし、四辺の個別指定は出来ません。

キーワード解説

none: ボーダーを無しにします。この値を指定すると、ボーダーの幅の値は強制的に"0"になります。
hidden: CSS2で新たに追加されたキーワードです。[none]とほぼ同じですが、結合ボーダーモデルでは、該当する辺にボーダーを表示するのを禁止します。(詳細は結合によって起こる競合の解決方法を参照)
dotted: ボーダーを点線にします。
dashed: ボーダーを破線にします。
solid: ボーダーを切れ目の無い実線にします。
double: ボーダーを二重線にします。2本の実線とその間の空白との合計幅がボーダーの幅の値と等しくなります。
groove: 窪みに見えるボーダーを表示します。ボーダーに指定されている色を基本にしますが、どのように適用するかはUAに依存します。
ridge: [groove]の逆で、隆起して見えるボーダーを表示します。ボーダーに指定されている色を基本にしますが、どのように適用するかはUAに依存します。
inset: ボックスのボーダーより内側全体が窪みになるように表示します。結合ボーダーモデルの場合は、[groove]と同じになります。ボーダーに指定されている色を基本にしますが、どのように適用するかはUAに依存します。
outset: [inset]の逆で、ボックスのボーダーより内側全体が隆起になるように表示します。結合ボーダーモデルの場合は、[ridge]と同じになります。ボーダーに指定されている色を基本にしますが、どのように適用するかはUAに依存します。

値の書き方は、以下の通りです。0時から時計回り、足りない値は対辺から、と覚えると良いです。基本的にこの手の簡略化プロパティは、すべてそうです。
em { border-style: solid } /* 四辺とも solid */ em { border-style: solid dotted } /* 上と下が solid、右と左が dotted */ em { border-style: solid dotted groove } /* 上solid、右と左dotted、下groove */ em { border-style: solid dotted groove outset }/* 上solid、右dotted、下groove、左outset */

結合ボーダーモデルの表の場合を除いて、ボーダーの透き間からは、背景関連プロパティで指定した背景が見えます。結合ボーダーモデルの場合は、その部分は透過になります。

[dashed][dotted][double]の空いた部分からは、背景が見えます。

注意点

仕様書では[solid]以外のすべてのキーワードは[solid]と解釈しても良い事になっています。

CSS1とCSS2の相違点

結合ボーダーモデルの場合の値の変化が追記されました。