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プロパティ使用例
solid
borderプロパティ使用例
double
borderプロパティ使用例
groove
borderプロパティ使用例
ridge
borderプロパティ使用例
inset
borderプロパティ使用例
outset
borderプロパティ使用例
dashed
borderプロパティ使用例
dotted

外枠関連項目

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

戻る

TOP