スタイルborderColorプロパティ

<div>要素の4つの境界線の色を赤に変更します。

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

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

borderColorプロパティは、要素の境界線の色を設定または返します。

このプロパティは、1から4の値を取ることができます。

次のような1つの値：p {border-color：red} -4つの境界線すべてが赤になります
次のような2つの値：p {border-color：redtransparent}-上下の境界線は赤になり、左右の境界線は透明になります
次のような3つの値：p {border-color：red green blue}-上の境界線は赤、左右の境界線は緑、下の境界線は青になります
次のような4つの値：p {border-color：red green blue yellow}-上の境界線は赤、右の境界線は緑、下の境界線は青、左の境界線は黄色になります

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
borderColor	1.0	4.0	1.0	1.0	3.5

borderColorプロパティを返します。

object.style.borderColor

borderColorプロパティを設定します。

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

Value	Description
color	Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element
transparent	The color of the border is transparent (underlying content will shine through)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

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

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

<div>要素の境界線の色を返します。

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