HTML DOM スタイル borderBottomRightRadius プロパティの使い方を解説
borderBottomRightRadius プロパティは、要素の右下の角に丸み（角丸）を追加したり、その現在の値を取得したりするために使用されます。JavaScript を使って動的に角丸の形状を変更したい場合に便利なプロパティです。
構文
borderBottomRightRadius プロパティを設定する際の基本的な構文は以下のとおりです。
object.style.borderBottomRightRadius = "length|% [length|%]|initial|inherit"
プロパティの値
このプロパティに指定できる値は以下の4種類です。
| 番号 | 値と説明 |
|---|---|
| 1 | length px や em などの単位で右下の角の形状（丸みの大きさ）を定義します。 |
| 2 | % 親要素に対する割合（パーセンテージ）で右下の角の形状を定義します。 |
| 3 | initial このプロパティを初期値（デフォルト値）に設定します。 |
| 4 | inherit 親要素のプロパティ値を継承します。 |
なお、値は「水平方向 垂直方向」のように2つの値をスペースで区切って指定することもできます。これにより、楕円形の角丸を作成することが可能です。
サンプルコード
borderBottomRightRadius プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、右下の角丸が小さくなるサンプルです。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-right-radius: 240px 90px;
}
</style>
<script>
function changeBottomBorder(){
document.getElementById("DIV1").style.borderBottomRightRadius="90px 50px";
document.getElementById("Sample").innerHTML="右下の角丸が小さくなりました";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>下のボタンをクリックすると、上の要素の右下の角丸サイズが変更されます</p>
<button onclick="changeBottomBorder()">Change Bottom Border</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
「Change Bottom Border」ボタンをクリックすると、右下の角丸が小さくなり、以下のように表示が変化します。
このように、borderBottomRightRadius プロパティを使えば、CSS の初期スタイルから JavaScript だけで角丸の形状を動的に変更できます。ユーザーの操作に応じてデザインを変化させたい場合などに活用してみてください。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイル borderBottomLeftRadius プロパティの使い方を徹底解説
borderBottomLeftRadius プロパティとはborderBottomLeftRadius は、要素の左下の角に丸み（ラウンド）を加えるための DOM スタイルプロパティです。JavaScript を使えば、左下コーナーの形状を動的に設定したり、現在の値を取得したりすることができます。構文borderBottomLeftRadius プロパティを設定する場合の基本構文は以下の通りです。object.style.borderBottomLeftRadius = length|% [length|%]|initial|inherit設定できる値各プロパティ値の意味は次の表の通りです。