border (境界線のスタイル)


border属性

 境界線のスタイルを設定するには、borderを使います。文法は以下の通りですが、値の順番はその通りでなくても大丈夫です。デフォルトでは medium none になります。線の幅はピクセル(単位はpx)で指定するほか、thin, midium, thickなどが指定できます。境界線のスタイルは実線 solid の他、各種指定できます。詳しくは border-style を参照願います。

border { 境界線の幅 境界線のスタイル 境界線の色 }
#div1 {
  border: thin solid green;
}
#div3 {
  border-width: 8px;
  border-style: solid;
  border-color: #a06060;
}

 

border-color属性

 境界線の色を設定するには border-color を使います。色の指定は、#rrggbb形式の他、色の名前 (black, red など) が使えます。色の名前については、原色大辞典を参照してください。

#div2 {
  border-style: solid;
  border-color: #6060a0;
}

 

border-width属性

 境界線の幅はborder-widthで設定します。幅はピクセルの他、thin, midium, thickなどが指定できます。

<style>
#div3 {
  border-width: thick;
  border-style: solid;
  border-color: #a06060;
}
</style>

 

border-style属性

 境界線のスタイルはborder-styleで設定します。これは、以下の値を指定できます。これらの実際のイメージについてはサンプルページを参照してください。

説明
none境界線なし
hidden境界線を非表示
dotted点線
dashed破線
solid実線
double二重線
groove轍線
ridge盛り上がり
inset
outset
initial初期化(デフォルトにする)
inherit継承された値

.style1 {
  border-style: dashed;
}

 

box-sizing属性

 box-sizing属性は幅と高さ (width, height) が境界線に含まれるのか、内容に含まれるのかをブラウザに伝える。次の例で、box-sizing属性に border-box を指定すると、境界線も含めたサイズなので見た目小さくなります。

<style>
#box0 {
  box-sizing: content-box; /* default */
  width: 100px;
  height: 60px;
  border: solid thick black;
  background-color: yellow;
}

#box1 {
  box-sizing: border-box;
  width: 100px;
  height: 60px;
  border: solid thick black;
  background-color: red;
}
</style>
<div id="box0">content-box</div>
<div id="box1">border-box</div>
content-box
border-box

 box-sizing属性は以下の値を指定できます。

説明
content-boxwidth, heightは内容に含まれる(デフォルト)。
border-boxwidth, heightは境界に含まれる。padding, marginがあれば、それらにも含まれる。
initial初期化(デフォルトにする)
inherit継承された値

 

outline属性

 outlineは領域の外側の枠のスタイルを定義します。書き方はborder属性と同じで、色、線種、幅を指定します。

<style>
#box2 {
  width: 160px;
  height: 100px;
  border: solid medium black;
  background-color: gray;
  outline: blue dotted medium;
}
</style>
<div id="box2"></div>

 

境界線の位置による指定

 境界線の位置つまり上下左右により個別にスタイル、幅、色を指定できます。そのための属性が以下のように用意されています。

 使い方は、border, border-color, border-style, border-width と同じです。下のサンプルを示します。

#div4 {
  border-top: 3px red solid;
  border-left-color: green;
  border-left-width: thick;
  border-left-style: double;
  border-right: 1px red dotted;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: blue;
}

 

表の罫線でよく使うスタイル

 HTMLのtable, tdタグはデフォルトでは罫線どうしが離れていて、二重線のように表示されます。これを細い線で表示するためには、border-collapse属性を使います。また、罫線どうしの距離を調整するには、border-spacing属性を使います。

 border-collapseは次の値を取ります。

意味
separate境界線を離す。
collapse境界線をくっつける。
initial初期値(デフォルト)にする。デフォルトはseparate。
inherit親要素から継承する。

border-collapseの使用例
.table1 {
  border: solid gray thin;
  border-collapse: collapse;
}
セル A1セル B1
セル A2セル B2

 border-spacingは2つまたは1つの値を取ります。1つの場合は、上下左右の隣り合った境界線同士の距離が指定した値になります。2つの場合は、最初の方が水平方向の距離、後の方が垂直方向の距離になります。initial, inheritの場合は1つだけ指定できます。

意味
length隣の境界線との距離
length length水平方向の距離 垂直方向の距離
initial初期値(デフォルト)にする。
inherit親要素から継承する。

border-spacingの使用例
.table2 {
  border: solid gray thin;
  border-collapse: separate;
  border-spacing: 0px;
}
セル A1セル B1
セル A2セル B2

 

境界線の角を丸くする (CCS3)

 border-radiusを指定すると矩形の角を丸くすることができます。これは、古いブラウザでは対応していません。

意味
length矩形の角を丸さを決める半径。px, em, %などの単位を指定できる。複数指定可能(下のサンプル参照)。
initial初期値(デフォルト)にする。デフォルトは丸めなし。
inherit親要素から継承する。

下の例は一番単純な指定方法を適用したものです。

#div5 {
  border: solid thin black;
  border-radius: 10px;
}

さらに複雑な設定もできます。border-radius単独で指定する場合は、値を複数していします。

#div6 {
  border: solid thin black;
  border-radius: 10px 4px 10px 4px;
}

複雑な設定の場合、border-radius単独だとわかりづらくなるので、下のようにした方がいいかもしれません。つまり、border-top-left-radius, border-bottom-left-radius, border-top-right-radius, border-bottom-right-radius 属性を用いて個別に丸めの量を設定します。

#div7 {
  border: solid thin black;
  border-bottom-left-radius: 1em;
  border-top-right-radius: 1em;
}

 

画像で境界線を作る (CSS3)

 直線の代わりに画像で境界を表示することもできます。これには、border-image属性を使います(古いブラウザは対応していません)。border-styleはsolidに、border-widthは画像枠の幅にしておく必要があります。

 まず、使用する画像を作ります。これはMS-Paintで適当に作った画像です。


#div8 {
  border: solid 20px transparent;
  border-image: url("box1.png");
}

 画像が矩形の四隅に表示されましたが、矩形を囲みたいので次のようにパラメータを追加します。

#div9 {
  border: solid 20px transparent;
  border-image: url("box1.png") 20 round;
}

 今度はパラメータを追加して、値を大きくするとピンクの部分が引き伸ばされました。このパラメータですが、最初の30が縦軸のピンクに、後の方が横軸のピンクに対応しています。これらの値を小さくするとピンク部分が繰り返しになります。

 他にもいろいろ設定がありますが、使い方が微妙ですね。

#div10 {
  border: solid 20px transparent;
  border-image: url("box1.png") 30 30 round;
}

 border-imageの文法ですが、下のようになっています。

border-image: source slice width outset repeat;

 sourceは画像のURLです。これはurl()関数を使って指定します。sliceは、画像の端から内側へスライスする距離です。widthは、境界線の太さですが今までの例では別途指定しているので使っていません。outsetは画像のふちをどう表示するかの指定です。repeatはキーワードstretch, round, repeat, space, initial, inheritのどれかで画像の繰り返し方法を指定します。

 これらは、個別に指定も可能です(長くなる場合はそちらのほうがよい)。border-image-source, border-image-slice, border-image-width, border-image-repeatがあります。

 

境界線に影を付ける (CSS3)

 境界線に影を付けることもできます。(古いブラウザは対応していません)これには、box-shadow属性を使用します。下の例は、横方向、たて方向の幅が10pxの影を付けています。

#div11 {
  border: solid 2px black;
  box-shadow: 10px 10px;
}

 もっとリアルっぽい影も付けることができます。下の例は3番目にぼかしパラメータを追加して影をぼかしています。

#div12 {
  border: solid 2px black;
  box-shadow: 10px 10px 10px;
}

 4番目のパラメータは、影の広がりの指定です。これを設定すると、矩形の左辺と上辺側にも影が広がります。

#div13 {
  border: solid 2px black;
  box-shadow: 10px 10px 10px 10px;
}

 パラメータinsetを指定すると矩形の内側に影が表示されます。

#div14 {
  border: solid 2px black;
  box-shadow: 10px 10px 10px inset;
}

影に色を付けることもできます。下の例は影の色をsilverに設定しています。

#div15 {
  border: solid 2px black;
  box-shadow: 10px 10px silver;
}

 

 

このページの先頭へ戻る