CSS border-width 属性

コース推薦：

定義と使用法

border-width 短縮属性は、要素のすべてのボーダーに幅を設定するか、または各ボーダーに個別に幅を設定します。

ボーダースタイルが none でない場合にのみ効果があります。ボーダースタイルが none であれば、ボーダーの幅は実際には 0 にリセットされます。負の長さ値を指定することはできません。

例1
  • border-width:thin medium thick 10px;
  • 上側のボーダーは細いボーダーです
  • 上側のボーダーは10pxです
  • 右側のボーダーは中程度のボーダーです

左側のボーダーは10px幅のボーダーです

例2
  • border-width:thin medium thick;
  • 上側のボーダーと下側のボーダーは細いボーダーです
  • 上側のボーダーは10pxです

下側のボーダーは太いボーダーです

例3
  • border-width:thin medium;
  • 上側のボーダーと下側のボーダーは細いボーダーです

右側のボーダーと左側のボーダーは中程度のボーダーです

例4
  • border-width:thin;

すべての4つのボーダーが細いボーダーです

例

4つのボーダーの幅を設定します：
  p
  {
  border-style:solid;
  border-width:15px;

}

実際に試してみてください

CSS 文法lengthborder-width: medium|thin|thick|

|initial|inherit;

属性値 値
説明 thin
medium デフォルト。中程度のボーダーを定義します。
thick 太いボーダーを定義します。
length ボーダーの幅をカスタマイズすることができます。
inherit 親要素からボーダーウィドスを継承する必要があります。

さらに例

すべてのボーダーウィドス属性が同じ宣言に含まれています
この例では、短縮属性を使用して、すべてのボーダーウィドス属性を同じ宣言で設定する方法を示しています。

技術的詳細

デフォルト値： medium
継承性： no
バージョン： CSS1
JavaScript 文法： object.style.borderWidth="thin thick"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

も参照してください：

CSS チュートリアル：CSS 边框

HTML DOM リファレンスマニュアル：borderWidth 属性