Style borderStyle 属性

定義と用法

borderStyle 属性は要素の枠線のスタイルを設定または返します。

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

  • 1つの値、例えば：p {border-style: solid} - すべての4つの枠線は実線
  • 2つの値、例えば：p {border-style: solid dotted} - 上下の枠線は実線、左右の枠線は点線
  • 3つの値、例えば：p {border-style: solid dotted double} - 上側の枠線は実線、左右の枠線は点線、下側の枠線は二重線
  • 4つの値、例えば：p {border-style: solid dotted double dashed} - 上側の枠線は実線、右側の枠線は点線、下側の枠線は二重線、左側の枠線は点線

参照してください：

CSS ツアー：CSS 枠線

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

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

border属性

インスタンス

例1

div要素に実線の枠線を追加します：

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "solid";

例2

div要素の4つの枠線のスタイルを変更します：

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

例3

div要素の枠線スタイルを返します：

document.getElementById("myDiv").style.borderStyle = listValue;

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

例4

すべての異なる値のデモンストレーション：
var listValue = selectTag.options[selectTag.selectedIndex].text;

document.getElementById("myDiv").style.borderStyle = listValue;

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

構文

borderStyle属性を設定します：borderStyle属性を返します：

.style.borderStyle

borderStyle属性を設定します：object .style.borderStyle =
value 値
説明 none
枠線を定義しません。デフォルトです。 hidden
"none"と同じですが、テーブル要素の枠線の衝突解決では除かれます。 dotted
点の枠線を定義します。 dashed
点線の枠線を定義します。 solid
実線の枠線を定義します。 double
二つの境界を定義します。二つの枠線の幅はborder-widthの値と同じです。 groove 3Dインセットの枠線を定義します。効果は border-color
3Dボウルの枠線を定義します。効果は ridge 3Dインセットの枠線を定義します。効果は border-color
3Dリッジの境界を定義します。効果は inset 3Dインセットの枠線を定義します。効果は border-color
の値。 3Dオウトセットの枠線を定義します。効果はborder-colorの値によって決まります。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的な詳細

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

ブラウザのサポート

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