border-style

解説

上下左右の線スタイルをまとめて指定します。上下左右を異なったスタイルにしたい場合には、スペースで区切り複数（1〜4）の値を指定します。値を1つ指定することにより上下左右が指定したスタイルとなります。値を2つ指定することにより、記述した順に上下、左右が指定したスタイルとなります。値を3つ指定することにより、記述した順に上、左右、下、が指定したスタイルとなります。値を4つ指定することにより、記述した順に上、右、下、左が指定したスタイルとなります。指定できる値は下表を参考にして下さい。

スタイルに指定する値
none線は表示されず、太さも0になる。表のセル等線が重なり合う場合、他の値が優先される（初期値）
hidden線は表示されず、太さも0になる。表のセル等線が重なり合う場合、この値が優先される
solid1本線で表示される
double2本線で表示される
dashed破線で表示される
dotted点線で表示される
groove立体的にくぼんだ線で表示される
ridge立体的に隆起した線で表示される
inset上と左の線が暗く、下と右のボーダーが明るく表示される
outset上と左の線が明るく、下と右の線が暗く表示される

プロパティ情報

値：キーワード（none,hidden,solid,double,dashed,dotted,groove,ridge,inset,outset）を1つ以上、4つ以下指定する。
初期値：none
適用対象：全ての要素
継承：しない
パーセンテージ：不可
適用メディア：視覚
レベル：1〜2

参照

border border-color border-style border-width border-top border-top-color border-top-style border-top-width border-bottom border-bottom-color border-bottom-style border-bottom-width border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width

使用例

ソース

CSSの記述方法はスタイルシートってなに？も参照下さい。

  p.samp1 { border-style: solid ; }
  p.samp2 { border-style: double; }
  p.samp3 { border-style: dashed; }
  p.samp4 { border-style: dotted; }
  p.samp5 { border-style: groove; }
  p.samp6 { border-style: ridge ; }
  p.samp7 { border-style: inset ; }
  p.samp8 { border-style: outset; }
  p.samp9 { border-style: none  ; }
  p.samp10{ border-style: hidden; }
HTMLの記述方法

<p class="samp1">solid を指定</p>
<p class="samp2">double を指定</p>
<p class="samp3">dashed を指定</p>
<p class="samp4">dotted を指定</p>
<p class="samp5">groove を指定</p>
<p class="samp6">ridge を指定</p>
<p class="samp7">inset を指定</p>
<p class="samp8">outset を指定</p>
<p class="samp9">none を指定</p>
<p class="samp10">hidden を指定</p>

表示結果

solid を指定

double を指定

dashed を指定

dotted を指定

groove を指定

ridge を指定

inset を指定

outset を指定

none を指定

hidden を指定