16.4.10 境界

ボックス要素の境界をコントロールする方法を説明します．

境界の形

境界を描くには，まず境界の形を指定しなければいけません．形の指定は，border-top-style,border-bottom-style,border-left-style,border-right-styleで上下左右独立に指定することができます．

例：

<div style="border-bottom-style:solid">境界の例</div>

境界の例

値にはsolid(実線),dotted(点線),dashed(鎖線),double(二重線),inset,groove(埋め込み),outset,ridge(盛り上がり)などがあります．

境界の太さ

境界の太さは，形同様 border-top-width プロパティなどで上下左右それぞれ指定することが出来ます．

例:

<div style="border-bottom-style:double;border-bottom-width:3px">二重線，3pxの境界</div>

二重線，3pxの境界

長さ指定については16.4.12 補足(1) 長さの指定方法を参照してください．

境界の色

境界の色は，border-top-colorなどで上下左右独立に指定できます．

例:

<div style="border-bottom-style:double;border-bottom-color:red;border-bottom-width:1px">赤い境界</div>

赤い境界

色の指定については16.4.13 補足(2) 色の指定方法を参照してください．

一括指定

borderの上下左右にそれぞれ形・太さ・色を指定するのは面倒なので，それらを一括指定する方法が容易されています．

まず，border-top プロパティを用いると，上の境界の形・太さ・色を一括指定する方法です．

例:

blockquote { border-top:1px solid gray; }

指定する順番は太さ・形・色の順です．形以外の値は省略することができます．もちろん border-bottom,border-left,border-right プロパティも存在します．さらに border プロパティがあって，これを使うと上下左右の境界の太さ・形・色を同時に指定することができます．

これとは別にborder-widthプロパティというのがあり，上下左右の境界の太さを一度に指定することができます．

例:

border-width: 1px 2px 3px 4px;

前から順に上，右，下，左の境界の太さを表します．border-color,border-styleプロパティも同様の使い方をします．

境界を利用した表現の例

境界を背景色をうまく用いると，はいぱーワークブックでおなじみの表現ができます．

<h2 style="border-left:gray solid 0.5em;background-color:#E0E0E0;">はいぱーワークブック</h2>

はいぱーワークブック

また，下と左の境界だけつけると次のような感じになります．

<div style="border-left:gray solid 0.5em;border-bottom:0.2em solid black;">境界の例</div>

境界の例

このような表現はいかにCSSが強力であるかを端的に示す良い例です．これらの表現はCSSなくして実現させることはできません．