トップページの中の プロパティの中の Bのプロパティ一覧の中の border-style

border-style

  • 最終更新:2009年11月 9日 13:51

border-styleプロパティは、上下左右のボーダーの種類を一括で指定できます。
各値は、半角スペースなどの空白類文字で区切って書きます。

対応ブラウザ
  • IE6一部対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

ボーダーの種類<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>{1,4}|inherit
初期値
個別のプロパティを参照します
適用される要素
全ての要素
継承
しません
パーセント値
N/A
メディア
visual

border-styleのサンプル

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

p.none {
  border-style: none;
}

p.hidden {
  border-style: hidden;
}

p.dotted {
  border-style: dotted;
}

p.dashed {
  border-style: dashed;
}

p.solid {
  border-style: solid;
}

p.double {
  border-style: double;
}

p.groove {
  border-style: groove;
}

p.ridge {
  border-style: ridge;
}

p.inset {
  border-style: inset;
}

p.outset {
  border-style: outset;
}

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

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

noneのサンプルです。

dottedのサンプルです。

dashedのサンプルです。

solidのサンプルです。

doubleのサンプルです。

grooveのサンプルです。

ridgeのサンプルです。

insetのサンプルです。

outsetのサンプルです。

ブラウザによって、結構見え方が違ってきます。

このページの上部へ