HTML DOM の borderBottomStyle プロパティとは？使い方と指定できる値を解説

borderBottomStyle プロパティは、HTML 要素の下ボーダー（下側の境界線）のスタイルを取得・設定するために使用されるプロパティです。JavaScript から動的に下ボーダーの見た目を変更したい場合に活用できます。

構文

borderBottomStyle プロパティの基本的な構文は以下のとおりです。

値を設定する場合

object.style.borderBottomStyle = value

値を取得する場合

object.style.borderBottomStyle

指定できる値

borderBottomStyle プロパティに指定できる主な値は以下のとおりです。

No.	値と説明
1	none デフォルト値。ボーダーを表示しません。
2	hidden none とほぼ同じですが、ボーダーの領域自体は確保されます。見た目は透明でもスペースは存在します。
3	dotted 点線のボーダーを定義します。
4	dashed 破線のボーダーを定義します。
5	solid 一本の実線ボーダーを定義します。
6	double 二重線のボーダーを定義します。
7	groove 溝のようにへこんだ 3D ボーダーを定義します。ridge の逆の効果です。
8	ridge 山脈のように盛り上がった 3D ボーダーを定義します。groove の逆の効果です。
9	inset 要素が埋め込まれたように見える 3D ボーダーを定義します。outset の逆の効果です。
10	outset 要素が浮き出たように見える 3D ボーダーを定義します。inset の逆の効果です。
11	initial このプロパティを初期値に設定します。
12	inherit 親要素のプロパティ値を継承します。

使用例

以下は、borderBottomStyle プロパティを使って div 要素の下ボーダーのスタイルを変更するサンプルコードです。ボタンをクリックすると、下ボーダーが groove（溝状）から dashed（破線）に変化します。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        width:300px;
        height:100px;
        border-bottom: 8px solid dodgerblue;
        border-bottom-style: groove;
    }
</style>
<script>
    function changeBottomStyle(){
        document.getElementById("DIV1").style.borderBottomStyle="dashed";
        document.getElementById("Sample").innerHTML="The bottom border style is now changed";
    }
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the div bottom border style size by clicking the below button</p>
<button onclick="changeBottomStyle()">Change Bottom Style</button>
<p id="Sample"></p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM の borderBottomStyle プロパティとは？使い方と指定できる値を解説

「Change Bottom Style」ボタンをクリックすると、div 要素の下ボーダーのスタイルが破線（dashed）に変更され、次のように表示されます。

HTML DOM の borderBottomStyle プロパティとは？使い方と指定できる値を解説

HTML DOM Style borderBottomWidthプロパティの使い方を徹底解説

HTML DOM スタイル borderBottomRightRadius プロパティの使い方を解説

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デフォルト値。ボーダーを表示しませ