border-style

border-styleプロパティは上下左右の四辺のボーダー（枠線）の種類（スタイル）をまとめて指定できる簡略化プロパティです。

値

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

初期値

個別のプロパティの初期値（none）を参照

適用対象

すべての要素（分離ボーダーモデルの表のうち列・列グループ・行・行グループ要素を除く）

継承

しない

メディア

visual

値には以下のキーワードを1つ以上4つ以下まで半角スペースで区切って続けて指定することができます。

none: 枠線なし（ボーダーの幅の値は強制的に0になる）
hidden: 枠線なし（"border-collapse : collapse ;" の表の場合に、該当する辺のボーダーの描写を抑制）
dotted: 点線（丸い点線）
dashed: 破線（四角い点線）
solid: 実線
double: 二重線
groove: 立体枠（窪み）
ridge: 立体枠（隆起）
inset: 立体枠（内側全体が窪み）
outset: 立体枠（内側全体が隆起）

値を1つだけ指定した場合は、その指定が四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の順で個別に反映されます。また、border-colorプロパティと border-widthプロパティ（0以外の値）を指定していても、border-styleプロパティの指定がない場合は、UA の初期値が "none" に設定されているため、ボーダーは描写されません。逆に border-styleプロパティだけでボーダーの幅と色が省略されても、border-widthプロパティの値は "midium"、border-colorプロパティの値は当該要素に指定されている、または継承されている colorプロパティの前景色（文字色）がボーダーの色として適用されるので、ボーダーは描写されます。

"none" と "hidden" はどちらも枠線を表示しない効果ですが、仕様書によると "hidden" は table要素に "border-collapse : collapse ;" が指定されている場合に、結合しているボーダーの表示を消すために使うとあります。

ボーダーの種類の上・下・左・右を個別指定

border-top-style: 上辺のボーダー（枠線）の種類（スタイル）を指定する
border-bottom-style: 下辺のボーダー（枠線）の種類（スタイル）を指定する
border-left-style: 左辺のボーダー（枠線）の種類（スタイル）を指定する
border-right-style: 右辺のボーダー（枠線）の種類（スタイル）を指定する

上・下・左・右の四辺のボーダーの種類を個別に指定する場合は、これら4つのプロパティが用意されています。border-styleプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。

border-styleプロパティの実装状況

Windows版Internet Explorer: ○（"hidden" の値は未実装）
Firefox: ○
Opera: ○
Safari: ○
Macintosh版Internet Explorer 5: ○（"hidden" の値は未実装）

border-top-styleプロパティ, border-bottom-styleプロパティ, border-left-styleプロパティ, border-right-styleプロパティも同上。

サンプル

記述例

.dotted { border-style : dotted ; border-color : #ff4500 ; }
.dashed { border-style : dashed ; border-color : #9f6 ; }
.solid  { border-style : solid ; border-color : #3f6 ; }
.double { border-style : double ; border-color : #f30 ; }
.groove { border-style : groove ; border-color : #0c6 ; }
.ridge  { border-style : ridge ; border-color : #36f ; }
.inset  { border-style : inset ; border-color : #c30 ; }
.outset { border-style : outset ; border-color : #03c ; }
li      { border-width : thick ; }

表示例

"solid" 以外のキーワードは、UA によってボーダーのスタイルのレンダリングが大きく異なります。たとえば、Windows版・Macintosh版ともに Internet Explorer では "dotted" は丸い点線で表示されますが、Firefox・Opera・Safari では破線（四角い点線）で表示されます。また、"dashed" においても点線の枠の間隔は UA によって異なります。

現在位置

W3G
CSS
ボックス
border-style

ナビゲーション

World Wide Web Guide

ステータス情報

作者: 上田遼
公開: 2007-02-02T16:05:16+09:00
更新: 2008-12-29T04:30:36+09:00
URI: http://w3g.jp/css/box/border-style

検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイムみんなのお国じまん New!