スタイル borderWidth 属性

定義と使用法

borderWidth 属性は要素の枠線の幅を設定または返します。

この属性は1から4つの値を取ることができます：

  • 値の例：p {border-width: thick} - すべての4つの枠線が太い
  • 2つの値、例えば：p {border-width: thick thin} - 上下の枠線が粗く、左右の枠線が細く
  • 3つの値、例えば：p {border-width: thick thin medium} - 上の枠線が粗く、左右の枠線が細く、下の枠線が中程度
  • 4つの値、例えば：p {border-width: thick thin medium 10px} - 上の枠線が粗く、右の枠線が細く、下の枠線が中程度、左の枠線が10px

も参照してください：

CSS チュートリアル：CSS 枠線

CSS リファレンスマニュアル：border-width 属性

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

例

例 1

<div>要素の4つの枠線の幅を変更します：

document.getElementById("myDiv").style.borderWidth = "thick";

自分で試してみてください

例 2

<div>要素の上下の枠線の幅を粗く、左右の枠線を細くに変更します：

document.getElementById("myDiv").style.borderWidth = "thick thin";

自分で試してみてください

例 3

使用して<div>要素の4つの枠線の幅を変更します：

document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";

自分で試してみてください

例 4

<div>要素の枠線の幅を返します：

alert(document.getElementById("myDiv").style.borderWidth);

自分で試してみてください

構文

borderWidth 属性を返します：

object.style.borderWidth

borderWidth 属性を設定します：

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
値 説明
thin 細い枠線を定義します。
medium 中程度の枠線を定義します。デフォルト。
thick 粗い枠線を定義します。
length 長さで計算される枠線の幅。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： medium
返り値： 文字列で、要素の枠線の幅を表します。
CSS バージョン： CSS1

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート