HTML DOM Style borderColorプロパティの使い方をわかりやすく解説
borderColorプロパティは、HTML要素のボーダー（境界線）の色を設定・取得するためのプロパティです。このプロパティを活用することで、ボーダーの各辺（上・右・下・左）にそれぞれ異なる色を指定することもできます。
構文（Syntax）
borderColorプロパティを設定する場合の基本的な構文は以下の通りです。
object.style.borderColor = "color|transparent|initial|inherit"
プロパティの値（Values）
borderColorプロパティに指定できる主な値とその説明は以下の表の通りです。
| 番号 | 値と説明 |
|---|---|
| 1 | Color（色） ボーダーの色を指定します。カラーネームや16進数、RGB値などで指定可能です。 |
| 2 | Transparent（透明） ボーダーの色を透明にします。透明になった部分の下にあるコンテンツが透けて見えるようになります。 |
| 3 | initial（初期値） このプロパティをデフォルトの初期値に戻します。 |
| 4 | inherit（継承） 親要素のborderColorプロパティの値を継承します。 |
サンプルコード（Example）
ここで、borderColorプロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックするとdiv要素のボーダー色が反転する仕組みを実装しています。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:100px;
height:100px;
border:solid 10px ;
border-color: limegreen crimson;
top: 10px;
}
</style>
<script>
function changeBorderColor(){
document.getElementById("DIV1").style.borderColor="crimson limegreen";
document.getElementById("Sample").innerHTML="The border colors are now reversed ";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Reverse the above div border colors by clicking the below button</p>
<button onclick="changeBorderColor()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>
このサンプルでは、CSS側でborder-color: limegreen crimson;と2つの色を指定しています。このように値をスペースで区切って記述すると、上下に最初の色（limegreen）、左右に次の色（crimson）が適用されます。
実行結果（Output）
上記のコードを実行すると、以下のような出力が得られます。
続いて、「Change Border Color」ボタンをクリックすると、JavaScriptによってボーダー色が反転し、以下のように表示が切り替わります。
このように、borderColorプロパティを使えば、ユーザーの操作に応じて動的にボーダー色を変更することができます。ボタンのホバー効果やフォームの入力状態の強調など、さまざまな場面で活用できる便利なプロパティです。
-
HTML DOMのborderStyleプロパティとは？使い方と設定できる値を徹底解説
borderStyleプロパティとはHTML DOMのborderStyleプロパティは、要素のボーダー（枠線）スタイルを一括で取得・設定できるショートハンド（省略記法）です。1〜4個の値を指定でき、指定した値の数によって以下のようにスタイルが適用されます。値を4つ指定した場合 … 上 → 右 → 下 → 左の順（時計回り）にそれぞれのボーダースタイルが適用されます。値を1つだけ指定した場合 … 4つの辺すべてに同じスタイルが適用されます。値を2つ指定した場合 … 1番目の値が上下に、2番目の値が左右に適用されます。構文borderStyleプロパティを設定する際の基本的な構文は次のとおりです
-
HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説
HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文 右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。 値説明 noneデフォルト値。ボーダーを表示しませ