border-style プロパティ CSS（Cascading Style Sheets）

border-style プロパティは四辺のボーダーのスタイルをまとめて指定する一括指定プロパティ (shorthand property）です。
それぞれの値は半角スペースで区切って１～４個指定できます。
値の個数によって指定する辺が変わるので注意が必要です。

値が１個
すべての辺に同じ値が適用されます。
値が２個
１つ目が上下辺、２つ目が左右辺に適用されます。
値が３個
１つ目が上辺、２つ目が左右辺、３つ目が下辺に適用されます。
値が４個
上辺、右辺、下辺、左辺の順に適用されます。

書式
スタイルの種類
関連項目

書式

{border-style: -top -right -bottom -left;}

スタイルの種類

div要素にボーダースタイルを設定し、見やすいように線の太さを8pxにした表示です。

div {
  height: 80px;
  width: 120px;
  margin: 10px;
  padding: 10px;
  background-color: #80f080;
  border-width: 8px;
}
.db1 {
  border-style: none;
}
.db2 {
  border-style: hidden;
}
.db3 {
  border-style: dotted;
}
.db4 {
  border-style: dashed;
}
.db5 {
  border-style: solid;
}
.db6 {
  border-style: double;
}
.db7 {
  border-style: groove;
}
.db8 {
  border-style: ridge;
}
.db9 {
  border-style: inset;
}
.db10 {
  border-style: outset;
}

none

ボーダーを表示しません。
none 値は優先度が低いため、テーブルでセルの間隔を重ね合わせる設定（collasped）の場合は、競合するボーダーが表示されます。

<div class="db1">none</div>

hidden

ボーダーを表示しません。
hidden 値は優先度が高いため、テーブルでセルの間隔を重ね合わせる設定（collasped）の場合は、競合するボーダーは非表示になります。

<div class="db2">hidden</div>

dotted

点線で表示されます。

<div class="db3">dotted</div>

dashed

破線で表示されます。

<div class="db4">dashed</div>

solid

１本の実線で表示されます。

<div class="db5">solid</div>

double

２本の実線で表示されます。

<div class="db6">double</div>

groove

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

<div class="db7">groove</div>

ridge

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

<div class="db8">ridge</div>

inset

要素が立体的に窪んだように表示されます。

<div class="db9">inset</div>

outset

要素が立体的に隆起したように表示されます。

<div class="db10">outset</div>