各辺のボーダーの種類を個別に指定できるプロパティです。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

ボーダーの種類<border-style>

none

無し。border-widthプロパティの値も0になります。
なお、テーブルをborder-collapse: collapse;にして競合した場合は、他が優先されます。

hidden

noneとほぼ同じ。なお、テーブルをborder-collapse: collapse;にして競合した場合は、最優先されます。

dotted

点線

dashed

破線

solid

切れ目の無い実線

double

2本の実線。2本の実線とその間の余白との合計幅がborder-widthプロパティの値と同じになります。

groove

谷型のボーダー

ridge

山型のボーダー。grooveの逆。

inset

凹んだボーダー

outset

凸型のボーダーinsetの逆。

これら全てのボーダーは、ボックスの背景上に重ねて描写されます。その為、doubleなどの値を指定した場合、背景が線のすき間から見えます。

プロパティの解説

値

<border-style>｜inherit

初期値

none

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual

初期値がnoneの為、他の値（hidden以外）を明確に指定しないとボーダーが表示されない事に注意しましょう。

border-style個別指定のサンプル

p {
  margin: 10px 10px 15px;
  padding: 8px 10px;
  border-width: 5px;
  border-color: #999;
  background: #f3f2eb;
}

p.sample {
  border-top-style: outset;
  border-right-style: double;
  border-bottom-style: solid;
  border-left-style: dotted;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

ボーダーの
個別指定の
サンプルです。