“けい線”の幅を表すborder-widthプロパティ
border-width

　border-widthプロパティは、ボックス“けい線”の幅を表すプロパティです。border-widthプロパティを使えば、上下左右の“けい線”幅を一括で指定できます。

　border-top-width、border-bottom-width、border-left-width、border-right-widthといったプロパティのショートハンドプロパティとして使用されます。

  • border-top-width
    ボックス上側の“けい線”幅を設定するプロパティ
  • border-bottom-width
    ボックス下側の“けい線”幅を設定するプロパティ
  • border-left-width
    ボックス左側の“けい線”幅を設定するプロパティ
  • border-right-width
    ボックス右側の“けい線”幅を設定するプロパティ

基本データ

構文 セレクタ{border-width:値;}
継承 ×
値
絶対的なサイズをpx（ピクセル）を使って指定する場合
○○px
相対的なサイズを%（パーセント）、em（イーエム）を使って指定する場合
○○%、○○em
親から継承させる場合
inherit
効果 ボックスの四方の“けい線”幅を一括で設定できる
初期値 0
適用個所 すべての要素

例

ほげほげですね。

ほげほげですね。

p {
border:#000000 solid;
border-width: 10px;
}
p {
border:red solid;
border-top-width: 40px;
border-bottom-width: 5px;
border-left-width: 20px;
border-right-width: 70px;
}

動作Webブラウザ

Internet Explorer 全バージョン
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("ID属性値").style.borderWidth
[window.]document.getElementById("ID属性値").style.borderTopWidth
[window.]document.getElementById("ID属性値").style.borderBottomWidth
[window.]document.getElementById("ID属性値").style.borderLeftWidth
[window.]document.getElementById("ID属性値").style.borderRightWidth

jQueryを使った参照方法

$('【セレクタ】').css('border-width','値');
$('【セレクタ】').css({'border-width':'値'});

$('【セレクタ】').css('border-top-width','値');
$('【セレクタ】').css({'border-top-width':'値'});

$('【セレクタ】').css('border-bottom-width','値');
$('【セレクタ】').css({'border-bottom-width':'値'});

$('【セレクタ】').css('border-left-width','値');
$('【セレクタ】').css({'border-left-width':'値'});

$('【セレクタ】').css('border-right-width','値');
$('【セレクタ】').css({'border-right-width':'値'});

CSSリファレンス インデックス

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT