BOX : border-style



記述形式 border-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset ;
適用 all elements
使用方法 領域枠線のスタイルを設定する。

none : 非表示。デフォルト
dotted : 点線
dashed : 破線
solid : 実線
double : 二重線
groove : 溝線
ridge : 山線
inset : 内側の要素を凹状に見せる
outset : 内側の要素を凸状に見せる
実行例 <DIV STYLE="border-style:none; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:dotted; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:dashed; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:solid; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:double; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:groove; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:ridge; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:inset; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

<DIV STYLE="border-style:outset; border-width:thick">要素</DIV>
CSS とは Cascading Style Sheet の略です

※ 枠線の形状を認識しやすいように border-color:orange で表示しています。
サポート
ブラウザ
OSpropertyIE3.xIE4.xIE5.0xIE5.5xNN4.xNN6.x
Winnone×
dotted××××
dashed××××
solid×
double×
groove×
ridge×
inset×
outset×
Macnone--
dotted--×
dashed--×
solid--
double--
groove--
ridge--
inset--
outset--
Unixnone----
dotted----×
dashed----×
solid----
double----
groove----
ridge----
inset----
outset----
  • IE または NN6.x の場合は border-style 単独でも右枠線を制御できます。
  • NN4.x では border-width と同時指定しなければ非表示になってしまいます。
  • Unix 版 NN4.x では groove と ridge / inset と outset は同じデザインになります。 また、これら4つの値では、border-color が無視されます。