構文

border : 線幅 線種 線色;
border-top : 線幅 線種 線色;
border-bottom : 線幅 線種 線色;
border-left : 線幅 線種 線色;
border-right : 線幅 線種 線色;

説明文

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

　「border」では以下のように枠線の幅，枠線の種類，枠線の色の順に指定する。

border : 幅 種類 色;

　この際，指定したスタイルは上下左右すべての枠線に対応する。<.p>

　また，各辺の線を個別に指定することも可能だ。この場合は，「border-top」では上側，「border-bottom」では下側，「border-left」では左側，「border-right」では右側の枠線を指定する。

　それぞれの項目について指定する値については，「border-width」，「border-style」，「border-color」を参照。

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

使用例

● CSSの定義

div { border : 5px solid #008000;
      padding : 5px;
}

h1 { border-top : 5px dashed red;
     border-bottom : 10px dotted green;
     border-left : 15px groove blue;
     border-right : 20px double yellow;
}

● HTMLの例

<h1>枠線のスタイルを指定する<br>「border」</h1>

<div>
  <p>ブロック要素や表などでは枠線で囲むことが可能だ。この枠線のスタイルを
  指定するのに「border」を利用する。</p>
</div>

● 表示結果

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

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

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

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

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

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

関連項目