★border-top-width(枠線の幅)
border-right-width
border-bottom-width
border-left-width

戻る

border-top-width(枠線の幅)
border-right-width
border-bottom-width
border-left-width


解説
枠線の上下左右の幅の太さを個別に指定する属性です(まとめて指定する属性は、border-widthです。)。border-top-style、border-right-style、border-bottom-style、border-left-style属性と一緒に指定して下さい。

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

border-widthの値

初期値

medium

%値の基準  

適用

すべてのエレメント

継承

しない


対応状況(各属性共通)
全ての値 L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3   E4 E5 ME5 E55 E6

使用例

ソース

表示&操作

スタイル部に、

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

と記述し、

上枠

上枠

下枠

左枠

右枠

double


と表示されます。

body部に、

<div class="top-n">上枠</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>

と記述すると。


Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/style/border--width.html
E-mailpokochan@mx1.tees.ne.jp