ウェブランサー

border-style - ボーダーの種類を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 しない

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

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

border-styleに与えられる値

border-style: none;
ボーダーを表示しません。これが初期値です。
border-style: hidden;
ボーダーを表示しません。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
border-style: solid;
1本の線で表示されます。
border-style: double;
2本の線で表示されます。
border-style: groove;
立体的に窪んだ線で表示されます。
border-style: ridge;
立体的に隆起した線で表示されます。
border-style: inset;
ボーダーで囲まれた領域が立体的に窪んだように表示されます。それぞれのボーダーの色加減を変えて表現しているので、四辺をまとめて指定するのが良いでしょう。
border-style: outset;
ボーダーで囲まれた領域が立体的に隆起したように表示されます。それぞれのボーダーの色加減を変えて表現しているので、四辺をまとめて指定するのが良いでしょう。
border-style: dashed;
破線で表示されます。
border-style: dotted;
点線で表示されます。

border-styleの使用サンプル

CSS
.box_sample01 {
 border-style: solid;
}
.box_sample02 {
 border-style: double;
}
.box_sample03 {
 border-style: groove;
}
.box_sample04 {
 border-style: ridge;
}
.box_sample05 {
 border-style: inset;
}
.box_sample06 {
 border-style: outset;
}
.box_sample07 {
 border-style: dashed;
}
.box_sample08 {
 border-style: dotted;
}
XHTML
<div class="box_sample01">
box_sample01 [border-style: solid;]</div>

<div class="box_sample02">
box_sample01 [border-style: double;]</div>

<div class="box_sample03">
box_sample01 [border-style: groove;]</div>

<div class="box_sample04">
box_sample01 [border-style: ridge;]</div>

<div class="box_sample05">
box_sample01 [border-style: inset;]</div>

<div class="box_sample06">
box_sample01 [border-style: outset;]</div>

<div class="box_sample07">
box_sample01 [border-style: dashed;]</div>

<div class="box_sample08">
box_sample01 [border-style: dotted;]</div>
表示確認
box_sample01 [border-style: solid;]
box_sample01 [border-style: double;]
box_sample01 [border-style: groove;]
box_sample01 [border-style: ridge;]
box_sample01 [border-style: inset;]
box_sample01 [border-style: outset;]
box_sample01 [border-style: dashed;]
box_sample01 [border-style: dotted;]

border-styleに関連するCSSプロパティ

外枠(ボーダー・アウトライン)
border 要素の周囲にボーダー(枠線)を付ける
border-bottom 要素の底辺にボーダー(枠線)を付ける
border-bottom-color 要素の底辺に設定したボーダー(枠線)の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-bottom-width 要素の底辺に設定したボーダー(枠線)の太さを指定する
border-break ボックスが分割された場合のボーダーの表示方法を指定する
border-collapse テーブルセルのボーダーの表示の仕方を指定する
border-color 要素のボーダー(枠線)の色を指定する
border-image 要素のボーダー(枠線)に画像を指定する
border-image-outset ボーダーイメージエリアを広げる
border-image-repeat ボーダー(枠線)に指定された画像の繰り返し方法を指定する
border-image-slice ボーダー(枠線)に指定された画像の使用範囲を指定する
border-image-source ボーダー(枠線)に使用する画像ファイルを指定する
border-image-width 画像ボーダーの太さを指定する
border-left 要素の左辺にボーダー(枠線)を付ける
border-left-color 要素の左辺に設定したボーダー(枠線)の色を指定する
border-left-style 要素の左辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-left-width 要素の左辺に設定したボーダー(枠線)の太さを指定する
border-length 脚注の区切り線の長さを指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺にボーダー(枠線)を付ける
border-right-color 要素の右辺に設定したボーダー(枠線)の色を指定する
border-right-style 要素の右辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-right-width 要素の右辺に設定したボーダー(枠線)の太さを指定する
border-spacing テーブルセルのボーダーの間隔を指定する
border-style ボーダー(枠線)の種類を指定する
border-top 要素の上辺にボーダー(枠線)を付ける
border-top-color 要素の上辺に設定したボーダー(枠線)の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-top-width 要素の上辺に設定したボーダー(枠線)の太さを指定する
border-width ボーダー(枠線)の太さを指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する