border-top-style（枠線のスタイル）
border-right-style
border-bottom-style
border-left-style

解説

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

border-top-style：: 上枠線に指定する属性
border-right-style：: 右枠線に指定する属性
border-bottom-style：: 下枠線に指定する属性
border-left-style：: 左枠線に指定する属性

値	border-styleの値
初期値	none
%値の基準
適用	すべてのエレメント
継承	しない

対応状況（各属性共通）

none

dotted

dashed

solid

double

groove

ridge

inset

outset

は動作しますが、全てsolidで表示されます。

使用例

ソース

表示＆操作

スタイル部に、

div{border-color:red;}
.top-n{border-top-style:none;
　　 border-top-width:0px;}
.dotted{border-top-style:dotted;
　　 border-top-width:3px;}
.dashed{border-top-style:dashed;
　　 border-top-width:3px;}
.top{border-top-style:solid;
　　 border-top-width:thin;}
.bottom{border-bottom-style:double;
　　 border-bottom-width:medium;}
.left{border-left-style:groove;
　　 border-left-width:thick;}
.right{border-right-style:ridge;
　　 border-right-width:10px;}
.double{border-left-style:inset;
　　 border-bottom-style:double;
　　 border-left-width:15px;
　　 border-bottom-width:10px;}

と記述し、

上枠

下枠

左枠

右枠

double

と表示されます。

body部に、

<div class="top-n">上枠</div><br>
<div class="dotted">上枠</div><br>
<div class="dashed">上枠</div><br>
<div class="top">上枠</div><br>
<div class="bottom">下枠</div><br>
<div class="left">左枠</div><br>
<div class="right">右枠</div><br>
<div class="double">double</div>

と記述すると。

pokochan@mx1.tees.ne.jp

border-top-style（枠線のスタイル） border-right-style border-bottom-style border-left-style

border-top-style（枠線のスタイル）
border-right-style
border-bottom-style
border-left-style