目次を飛ばして本文へ パン屑リストへ
関連プロパティ

border-top-style
border-right-style
border-bottom-style
border-left-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 | inherit
初期値 none
適用 すべての要素
継承 しない
レベル 2-
メディア visual

それぞれ上、右、下、左のボーダーの種類を指定します。

'border-style'や'border-top、border-right'、'border-bottom'、'border-left'、'border'を用いて、これらをほかのプロパティと一括指定する事も出来ます。

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

ワンポイント・アドバイス[groove][ridge][inset][outset]は、常に'color'の値に依存する為、ボーダーのみの色指定が出来ません。とは言うものの、大体のUAはボーダーの色指定が有効です。

結合ボーダーモデルの表の場合を除いて、ボーダーの透き間からは、背景関連プロパティで指定した背景が見えます。ボーダーに指定されている色を基本にしますが、どのように適用するかはUAに依存します。

注意点
  1. 仕様書では[solid]以外のすべてのキーワードは[solid]と解釈しても良い事になっています。
CSS1とCSS2の相違点
  1. 結合ボーダーモデルの場合の値の変化が追記されました。

page top
最終更新日:2018年07月18日
Copyright © 2002-2018 ばあど All Rights Reserved.