構文

border-style : 上線種 右線種 下線種 左線種;
border-top-style : 線種;
border-bottom-style : 線種;
border-left-style : 線種;
border-right-style : 線種;

説明文

　ブロック要素や表などのボックスに要素本体を納めるタグについては，要素の外枠に枠線で囲むことができる。スタイルシートの「border-style」では枠線の種類を指定できる。また，水平線の<hr>タグについても指定できる。

　枠線は上下左右独立した種類を指定することが可能となっている。「border-top-style」では上側，「border-bottom-style」では下側，「border-left-style」では左側，「border-right-style」では右側の枠線の種類を指定する。また，「border-style」にて全ての枠線を一括して設定できる（詳しくは同ページの「border-styleの一括指定」を参照）。

　枠線種類は以下のような線名で指定できる。また，「none」を指定した場合は，線を描かなくなる。

線名意味
none線を描かない
solid実線
dotted点線
dashed破線
double二重線
groove谷線
ridge山線
inset内線
outset外線
inherit親となるタグの線種を継承する
[画像のクリックで拡大表示]

使用例

● CSSの定義

div { border-style : solid;
      border-width : 5px;
      padding : 5px;
}

h1 { border-top-style : dashed;
     border-bottom-style : dotted ;
     border-left-style : groove;
     border-right-style : double;
     border-width : 5px 15px;
     border-color : #ff0000;
}

hr { border-style : ridge none none none;
     border-width : 5px;
     border-color : #0000ff;
}

table { border-collapse: collapse; }

td { border-style : solid;
     border-width : 1px;
     border-color : #000000;
     padding : 2px;
}

● HTMLの例

<h1>枠線の種類を指定する<br>「border-style」</h1>

<div>
  <p>ブロック要素や表などでは枠線で囲むことが可能だ。この枠線の種類を指定す
  るのに「border-style」を利用する。</p>
  <p>また，枠線の種類は以下のような名前を用いて指定する。</p>
  <hr>
  <table>
  <tbody>
    <tr>
        <td>実線</td>
        <td>solid</td>
    </tr>
    <tr>
        <td>点線</td>
        <td>dotted</td>
    </tr>
    <tr>
        <td>破線</td>
        <td>dashed</td>
    </tr>
  </tbody>
  </table>
</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

border-styleの一括指定

　「border-style-left」など上下左右の枠線の種類を個別に指定するほか，「border-style」を使うことで一度に枠線の種類を指定することが可能だ。「border-style」に1つの枠線の種類を指定すると上下左右同じ枠線となる。例えば，

border-style : solid;

と指定すれば，上下左右全ての枠線が実線で描かれる

　また，以下のような記述で，各枠線の種類を指定できる。

border-style : 全て;
border-style : 上下 左右;
border-style : 上 左右 下;
border-style : 上 右 下 左;

　例えば，以下のように指定すれば，上が実線，下が二重線，左右が破線で描かれる。

border-style : solid dashed double;

<hr>タグでの枠線の指定

　<hr>タグで枠線を指定する場合には注意が必要となる。<hr>タグは1本の線で構成し得いるのではなく，ブロック要素のタグと同様に矩形の4本の枠線から構成される。しかし，他のタグとは異なり囲む要素は何も存在せず，4本の枠線がくっついた形となる。そのため，点線などで線を引くと2重の線で引かれてしまう。

[画像のクリックで拡大表示]

　もし，1本の線で枠線を引きたい場合は，上または下の線のみを表示し，そのほかの線を表示しないようにすればよい。下記のスタイルシートの記述では，「border-style」で上の線以外を表示しない「none」を指定することで，上の線のみを表示している。

hr { border-style : dotted none none none;
     border-width : 5px;
     border-color : #ff0000;
}
[画像のクリックで拡大表示]

関連項目