スタイル borderColor 属性

定義と使用法

borderColor 属性は要素の境界線の色を設定または返します。

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

  • 値の例：p {border-color: red} - すべての4つの境界線が赤色です
  • 2つの値、例えば：p {border-color: red transparent} - 上下枠線は赤色、左右枠線は透明
  • 3つの値、例えば：p {border-color: red green blue}- 上枠線は赤色、左右枠線は緑色、下枠線は青色
  • 4つの値、例えば：p {border-color: red green blue yellow} - 上枠線は赤色、右枠線は緑色、下枠線は青色、左枠線は黄色

また参照してください：

CSS 教程：CSS 枠線

CSS 参考マニュアル：border-color 属性

HTML DOM 参考マニュアル：border 属性

例

例 1

<div>要素の全ての枠線の色を赤色に変更します：

document.getElementById("myDiv").style.borderColor = "red";

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

例 2

<div>要素の上下の枠線の色を緑色に、左右の枠線の色を紫色に変更します：

document.getElementById("myDiv").style.borderColor = "green purple";

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

例 3

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

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

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

構文

borderColor 属性を返します：

object.style.borderColor

borderColor 属性を設定します：

object.style.borderColor = "color|transparent|initial|inherit"

属性値

値 説明
color

枠線の色を指定します。デフォルトの色は黒です。

参照してください CSS 色値、可能な色値の完全なリストを取得します。
transparent 枠線の色は透明です（下層の内容が透けて見えます）。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： ブラック
返り値： 文字列，表示要素の枠線の色。
CSS 版本： CSS1

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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