CSS3: border-style プロパティ - 境界ボックスの線のスタイル

■ 概要

項　　目説　　明
記述形式 セレクタ {border-style: 上の値　右の値　下の値　左の値 }
値 の形式
  1. 値を４つ指定： 上の値　右の値　下の値　左の値
  2. 値を３つ指定： 上の値　右の値　下の値　　（左の値 ＝ 右の値）
  3. 値を２つ指定： 上の値　右の値　　（下の値 ＝ 上の値，左の値 ＝ 右の値）
  4. 値を１つ指定： 上の値　　（右の値，下の値，左の値 は同じ値）
　各部の値：　none，hidden，solid，dashed，dotted，double，groove，ridge，inset，outset
初 期 値 none
対応ブラウザー C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

border-styleプロパティ は，要素の 境界ボックスの上下左右の線のスタイル （border-top-style，border-right-style， border-bottom-style，border-left-style）を一括指定します。

すなわち，

  1. 上の値：　border-top-style，
  2. 右の値：　border-right-style，
  3. 下の値：　border-bottom-style，
  4. 左の値：　border-left-style，
を一括指定します。

上の 1 ～ 4 に示すとおり，値の形式 として， 半角ブランクを挟んで４つまでの値が指定できます。　このとき，

  1. 指定する値の個数にかかわらず，値の順序は，最初から， 上の値 → 右の値 → 下の値 → 左の値 と決まっています。　（上から時計回り）
  2. 値を３つ指定した場合は，省略された 左の値 は 右の値 と同じになります。　
  3. 値を２つ指定した場合は，さらに，省略された 下の値 は 上の値 と同じになります。
  4. 値を１つだけしか指定しない場合は，それが 上，右，下，左 のすべての値になります。

値を指定する際には，次のようなキーワードが使用可能です。

値説　　明
none 境界なしにします。　ただし，表のセルなどで隣接要素と指定が競合した場合は，他の要素の指定が優先されます。
hidden 境界を非表示にします。　ただし，表のセルなどで隣接要素と指定が競合した場合は，この要素の指定が優先されます。
solid 実線を表示します。
dashed 破線を表示します。
dotted 点線を表示します。
double ２重線を表示します。
groove 境界部分が溝のように立体的にへこんで見える線を表示します。
ridge 境界部分が隆起して立体的に飛び出して見える線を表示します。
inset 境界に囲まれた内部が立体的にへこんで見える線を表示します。
outset 境界に囲まれた内部が立体的に飛び出して見える線を表示します。
備　　考 dashed（破線） や dotted（点線） の場合，長さ や 間隔 を調整する方法は提供されていません。

■ 使用例１（ border-style プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
  div.sample {width: 50%; }
  p.style1 {border-style: none}
  p.style2 {border-style: hidden}
  p.style3 {border-style: solid}
  p.style4 {border-style: dashed}
  p.style5 {border-style: dotted}
  p.style6 {border-style: double}
  p.style7 {border-style: groove}
  p.style8 {border-style: ridge}
  p.style9 {border-style: inset}
  p.style10 {border-style: outset}
-->
</style>
HTML
<body> ～ </body>		 
<div class="sample">
   <p class="style1">{border-style: none} の境界表示</p>
   <p class="style2">{border-style: hidden} の境界表示</p>
   <p class="style3">{border-style: solid} の境界表示</p>
   <p class="style4">{border-style: dashed} の境界表示</p>
   <p class="style5">{border-style: dotted} の境界表示</p>
   <p class="style6">{border-style: double} の境界表示</p>
   <p class="style7">{border-style: groove} の境界表示</p>
   <p class="style8">{border-style: ridge} の境界表示</p>
   <p class="style9">{border-style: inset} の境界表示</p>
   <p class="style10">{border-style: outset} の境界表示</p>
</div>

ブラウザー 表示例

{border-style: none} の境界表示

{border-style: hidden} の境界表示

{border-style: solid} の境界表示

{border-style: dashed} の境界表示

{border-style: dotted} の境界表示

{border-style: double} の境界表示

{border-style: groove} の境界表示

{border-style: ridge} の境界表示

{border-style: inset} の境界表示

{border-style: outset} の境界表示

■ 使用例２　（ border-style プロパティの値の個数と表示）

上述のとおり，値を３つ指定した場合は，省略された 左のスタイル は 右のスタイル と同スタイルになります。 　さらに，値を２つ指定した場合は， 加えて，省略された 下のスタイル は 上のスタイル と同スタイルになります。 　値を１つだけしか指定しない場合は，それが 上下左右すべてのスタイルになります。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample3 { width:320px; height:60px; 
      border: solid 6px;
      border-style: solid double dashed dotted;
   }
   div.sample4 { width:320px; height:60px; 
      border: solid 6px;
      border-style: solid double dashed;
   }
   div.sample5 { width:320px; height:60px; 
      border: solid 6px;
      border-style: solid double;
   }
   div.sample6 { width:320px; height:60px; 
      border: solid 6px;
      border-style: solid;
   }
-->
</style>
HTML
<body> ～ </body>		 
<div class="sample3">
   これが class="sample3" の部分です。
</div>
<br>
<div class="sample4">
   これが class="sample4" の部分です。
</div>
<br>
<div class="sample5">
   これが class="sample5" の部分です。
</div>
<br>
<div class="sample6">
   これが class="sample6" の部分です。
</div>

ブラウザー 表示例
これが class="sample3" の部分です。
これが class="sample4" の部分です。
 　←左側は右側と同スタイルになります。
　　（値３つを指定）
これが class="sample5" の部分です。
 　←左側は右側，下は上と同スタイルになります。
　　（値２つを指定）
これが class="sample6" の部分です。
 　←全部同スタイルになります。
　　（値１つを指定）

■ 備考

【参考ページ】