HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM の borderRadius プロパティとは？角丸の設定方法を徹底解説

HTML DOM の borderRadius プロパティは、要素の四隅に角丸（丸み）を追加するために使用されるプロパティです。このプロパティを利用することで、borderTopLeftRadius（左上）、borderTopRightRadius（右上）、borderBottomRightRadius（右下）、borderBottomLeftRadius（左下）といった各コーナーの半径を、まとめて設定したり取得したりすることができます。

borderRadius プロパティの構文

borderRadius プロパティを設定する場合の構文は以下のとおりです。

object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"

指定できる値は最大4つまでで、「左上 右上 右下 左下」の順にコーナーごとの角丸の大きさを指定します。値を省略した場合は対角のコーナーと同じ値が適用されます。

プロパティ値の一覧

値説明
lengthpx や em などの単位で境界線の角丸の形状を定義します。
%パーセンテージで境界線の角丸の形状を定義します。
initialこのプロパティを初期値（デフォルト値）に設定します。
inherit親要素のプロパティ値を継承します。

borderRadius プロパティの使用例

それでは、実際に borderRadius プロパティを使用したサンプルコードを見てみましょう。ボタンをクリックすると、div 要素の四隅の角丸が大きくなります。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        height: 100px;
        width: 200px;
        border: 10px groove orange;
        padding: 10px;
        border-radius: 1px 1px 1px 1px;
    }
</style>
<script>
    function changeBorderRadius(){
        document.getElementById("DIV1").style.borderRadius="45px 45px 45px 45px";
        document.getElementById("Sample").innerHTML="上記 div の四隅の角丸が大きくなりました";
    }
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>下のボタンをクリックすると、上の div の角丸のサイズが大きくなります</p>
<button onclick="changeBorderRadius()">Change Border Radius</button>
<p id="Sample"></p>
</body>
</html>

実行結果

ページを表示した直後の状態です。初期状態では border-radius が「1px」に設定されているため、ほぼ角のない矩形が表示されます。

HTML DOM の borderRadius プロパティとは？角丸の設定方法を徹底解説

続いて、「Change Border Radius」ボタンをクリックすると、JavaScript によって borderRadius プロパティが「45px」に変更され、四隅に大きな丸みが付きます。

HTML DOM の borderRadius プロパティとは？角丸の設定方法を徹底解説

まとめ

borderRadius プロパティを使えば、CSS を書き換えることなく JavaScript から動的に要素の角丸を制御できます。ユーザーの操作に応じてデザインを変化させたい場合や、アニメーション効果を加えたい場合などに活用するとよいでしょう。なお、CSS 側で静的に指定する場合は border-radius プロパティを使用します。

  1. HTML DOMのborderStyleプロパティとは？使い方と設定できる値を徹底解説

    borderStyleプロパティとはHTML DOMのborderStyleプロパティは、要素のボーダー（枠線）スタイルを一括で取得・設定できるショートハンド（省略記法）です。1〜4個の値を指定でき、指定した値の数によって以下のようにスタイルが適用されます。値を4つ指定した場合 … 上 → 右 → 下 → 左の順（時計回り）にそれぞれのボーダースタイルが適用されます。値を1つだけ指定した場合 … 4つの辺すべてに同じスタイルが適用されます。値を2つ指定した場合 … 1番目の値が上下に、2番目の値が左右に適用されます。構文borderStyleプロパティを設定する際の基本的な構文は次のとおりです

  2. HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説

    HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文 右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。 値説明 noneデフォルト値。ボーダーを表示しませ