border-style（枠線のスタイルの略記）

解説

枠線の上下左右のスタイルをまとめて指定する属性です（個別に指定する属性は、border-top-style、border-right-style、border-bottom-style、border-left-styleです。）。Netscape Navigatorは、このborder-style属性だけでは表示できませんので、border-width属性も指定して下さい。

値	none：枠線無し hidden：noneと同じ dotted：点線 dashed：波線 solid：直線（実線） double：二重線 groove：溝線（3D） ridge：稜線（3D） inset：沈み込んだ枠線（3D） outset：浮き上がった枠線（3D）指定は１値～４値の任意値の数と枠線との対応について
初期値	none 各属性の初期値
%値の基準
適用	すべてのエレメント
継承	しない

対応状況

none

dotted

dashed

solid

double

groove

ridge

inset

outset

は、スタイルをまとめて設定すると、正常に動作しません。（まとめて設定すると、全てoutsetで表示されます。）

使用例

ソース

表示＆操作

スタイル部に、

div{border-width:10px;
　　border-color:red;}
.none{border-style:none;}
.dotted{border-style:dotted;}
.dashed{border-style:dashed;}
.solid{border-style:solid;}
.double{border-style:double;}
.groove{border-style:groove;}
.ridge{border-style:ridge;}
.inset{border-style:inset;}
.outset{border-style:outset;}
.s-d{border-style:solid double;}
.s-d-g{border-style:solid double groove;}
.s-d-g-r{border-style:solid double groove ridge;}
.style1{border-style:none none double solid;}

と記述し、

none

dotted

dashed

solid

double

ridge

groove

inset

outset

solid上下double左右

solid上double左右groove下

solid上double右groove下ridge左

個別指定のように

と表示されます。

body部に、

<div class="none">none</div><br>
<div class="dotted">dotted</div><br>
<div class="dashed">dashed</div><br>
<div class="solid">solid</div><br>
<div class="double">double</div><br>
<div class="ridge">ridge</div><br>
<div class="groove">groove</div><br>
<div class="inset">inset</div><br>
<div class="outset">outset</div><br>
<div class="s-d">solid上下double左右</div><br>
<div class="s-d-g">solid上double左右groove下</div><br>
<div class="s-d-g-r">solid上double右groove下ridge左</div><br>
<div class="style1">個別指定のように</div>

と記述すると。

pokochan@mx1.tees.ne.jp