BOX : border-width



記述形式 border-width : thin | medium | thick | length ;
適用 all elements
使用方法 領域の枠線の幅(太さ)を設定する。

thin : 細
medium : 中。デフォルト
thick : 太

length 指定の場合は基本的に top , right , bottom , left の順で設定しますが、 以下のように省略することもできます。
ex1 . border-width: 10px;
    上下左右 全ての枠線の幅が 10px に設定されます。
ex2 . border-width: 10px 20px;
    枠線の幅が 上下10px,左右20px に設定されます。
ex3 . border-width: 10px 20px 30px;
    枠線の幅が 上10px,左右20px,下30px に設定されます。

各プロパティの間には半角スペースを入れます。
実行例 <DIV STYLE="border-style:solid; border-width:thin">要素</DIV>
CSS とは Cascading Style Sheet の略です

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

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

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

<DIV STYLE="border-style:solid; border-width:30px 20px 10px">要素</DIV>
CSS とは Cascading Style Sheet の略です
サポート
ブラウザ
OSpropertyIE3.xIE4.xIE5.0xIE5.5xNN4.xNN6.x
Winthin×
medium×
thick×
length×
Macthin--
medium--
thick--
length--
Unixthin----
medium----
thick----
length----
  • NN4.x の場合は border-width 単独でも各枠線を制御できます。
  • IE または NN6.x では border-style と同時指定しなければ非表示になってしまいます。
  • Mac 版 NN4.x では、各枠線の太さを別々に指定(一番下の実行例のような場合)すると枠表示が崩れます。