border-styleの解説|クロノドライブのCSS辞典

border-style

対応ブラウザ Internet Explorer 5.5~ / Firefox 1~ / Google Chrome 1~ / Safari 1~ / Opera 3.5~
初期値 none 継承 しない
適用可能な要素 すべて
用例
.style {
  border-style: solid double dotted dashed;
}

border-styleとは

border-styleとは上下左右のボーダーラインの種類を、まとめて指定するプロパティです。
以下の値で指定します。

none(初期値)
線幅は0になり、ボーダーラインは表示されません。
hidden
線幅は0になり、ボーダーラインは表示されません。noneとの違いは、border-collapse: collapseの指定されたテーブル内で、同じ位置に重なる他のセル等のボーダーラインも表示されなくなることです(hiddenが優先される)。noneでは同じ位置に他のセル等の(noneやhiddenでない)ボーダーが重なる場合、そちらが表示されます。
solid
ボーダーラインを実線に指定します。
double
ボーダーラインを二重線に指定します。
groove
ボーダーラインを谷型の線(窪んで見えるような線)に指定します。
ridge
ボーダーラインを山型の線(盛り上がって見える線)に指定します。
inset
ボーダーラインを凹型の線(領域全体が窪んで見えるような線)に指定します。
dotted
ボーダーラインを点線に指定します。
dashed
ボーダーラインを破線に指定します。

4つ値を指定する場合は上 右 下 左の時計回りの順、
3つ値を指定する場合は上 左右 下の順、
2つ値を指定する場合は上下 左右の順、
1つだけ指定する場合は上下左右を一括で指定することになります。