HTML DOM スタイル borderBottomLeftRadius プロパティの使い方を徹底解説
borderBottomLeftRadius プロパティとは
borderBottomLeftRadius は、要素の左下の角に丸み（ラウンド）を加えるための DOM スタイルプロパティです。JavaScript を使えば、左下コーナーの形状を動的に設定したり、現在の値を取得したりすることができます。
構文
borderBottomLeftRadius プロパティを設定する場合の基本構文は以下の通りです。
object.style.borderBottomLeftRadius = "length|% [length|%]|initial|inherit"
設定できる値
各プロパティ値の意味は次の表の通りです。
| 番号 | 値と説明 |
|---|---|
| 1 | length px などの単位を使って、左下の角の丸みの大きさを定義します |
| 2 | % パーセンテージで左下の角の丸みを定義します |
| 3 | initial このプロパティを初期値に戻します |
| 4 | inherit 親要素のプロパティ値を継承します |
補足：楕円形の角も作れる
length や % の値には、水平方向の半径と垂直方向の半径をスペース区切りで2つ指定できます。例えば「90px 50px」と指定すると、縦横で異なる曲率を持つ楕円形の角が描けます。
サンプルコード
それでは、borderBottomLeftRadius プロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-left-radius: 240px 90px;
}
</style>
<script>
function changeBottomBorder(){
document.getElementById("DIV1").style.borderBottomLeftRadius="90px 50px";
document.getElementById("Sample").innerHTML="左下の境界線の半径が小さくなりました";
}
</script>
</head>
<body>
<div id="DIV1">サンプルテキスト</div>
<p>下のボタンをクリックすると、上の要素の左下の境界線サイズが変わります</p>
<button onclick="changeBottomBorder()">左下の境界線を変更</button>
<p id="Sample"></p>
</body>
</html>実行結果
上記のコードを実行すると、次のように表示されます。
ボタンクリック後の変化
「左下の境界線を変更」ボタンをクリックすると、JavaScript の changeBottomBorder() 関数が呼び出され、左下の角の半径が「240px 90px」から「90px 50px」へと縮小されます。同時に、その旨のメッセージが画面に表示されます。
まとめ
borderBottomLeftRadius プロパティを使うことで、要素の左下コーナーだけを部分的に丸めることができます。CSS での静的な指定だけでなく、JavaScript から動的に変更することも可能なので、ユーザーの操作に応じたインタラクティブな UI 表現にも活用できます。
-
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デフォルト値。ボーダーを表示しませ