border-style 【外枠の種類指定】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

border-styleプロパティは、ボーダーの種類を指定する際に使用します。上下左右にそれぞれ違う色を指定したい場合は、スペースで区切って複数の値を指定する事が出来ます。ボーダーに色を付ける際には太さと種類も合わせて指定する事を推奨します。

ボーダーに関する値をまとめて指定したい場合は、borderプロパティを使います。

none
ボーダーを表示しません。これが初期値です。

hidden
ボーダーを表示しません。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。

solid
1本の線で表示されます。

double
2本の線で表示されます。

groove
立体的に窪んだ線で表示されます。

ridge
立体的に隆起した線で表示されます。

inset
ボーダーで囲まれた領域が立体的に窪んだように表示されます。それぞれのボーダーの色加減を変えて表現しているので、四辺をまとめて指定するのが良いでしょう。

outset
ボーダーで囲まれた領域が立体的に隆起したように表示されます。それぞれのボーダーの色加減を変えて表現しているので、四辺をまとめて指定するのが良いでしょう。

dashed
破線で表示されます。

dotted
点線で表示されます。

border-colorの使用例

CSSファイル

.sample001 {
 width: 200px;
 border-width: 10px;
 border-style: solid;
 padding: 3px;
 margin: 5px;
}
.sample002 {
 width: 200px;
 border-width: 10px;
 border-style: double;
 padding: 3px;
 margin: 5px;
}
.sample003 {
 width: 200px;
 border-width: 10px;
 border-style: groove;
 padding: 3px;
 margin: 5px;
}
.sample004 {
 width: 200px;
 border-width: 10px;
 border-style: ridge;
 padding: 3px;
 margin: 5px;
}
.sample005 {
 width: 200px;
 border-width: 10px;
 border-style: inset;
 padding: 3px;
 margin: 5px;
}
.sample006 {
 width: 200px;
 border-width: 10px;
 border-style: outset;
 padding: 3px;
 margin: 5px;
}
.sample007 {
 width: 200px;
 border-width: 10px;
 border-style: dashed;
 padding: 3px;
 margin: 5px;
}
.sample008 {
 width: 200px;
 border-width: 10px;
 border-style: dotted;
 padding: 3px;
 margin: 5px;
}

HTMLソース

<div class="sample001">borderプロパティ使用例<br />solid</div>
<div class="sample002">borderプロパティ使用例<br />double</div>
<div class="sample003">borderプロパティ使用例<br />groove</div>
<div class="sample004">borderプロパティ使用例<br />ridge</div>
<div class="sample005">borderプロパティ使用例<br />inset</div>
<div class="sample006">borderプロパティ使用例<br />outset</div>
<div class="sample007">borderプロパティ使用例<br />dashed</div>
<div class="sample008">borderプロパティ使用例<br />dotted</div>

表示すると

外枠関連項目

border(top right bottom left)	ボーダーの太さ・スタイル・色を指定
border-color	ボーダーの色を指定する
border-style	ボーダーのスタイルを指定する
border-width	ボーダーの太さを指定する

戻る

TOP

Copyright © digilog. All Rights Reserved.