【JavaScript】borderRadius について

2025年3月19日

JavaScript で borderRadius を指定するには、CSSのルールに従って値を設定する必要があります。
以下のポイントを押さえておくとスムーズに使えます。

borderRadius の基本

Javascript で指定する方法

//js

document.getElementById("box").style.borderRadius = "10px";

・CSSと同じ書き方でOK
・単位（ px , % , em など）をつける

borderRadius の指定方法

⒈ 1つの値を指定（四隅を同じ値にする）

//js

element.style.borderRadius = "20px";

・四隅すべてが20pxの丸みになる

⒉ 2つの値を指定（左上・右下、右上・左下）

//js

element.style.borderRadius = "20px 10px";

・20px →左上・右下、10px →右上・左下

⒊ 4つの値を指定（それぞれの角を個別に指定）

//js

element.style.borderRadius = "10px 20px 30px 40px";

・左上 → 10px、右上 → 20px、右下 → 30px、左下 → 40px

⒋ / を使って水平半径・垂直半径を指定（楕円形）

//js

element.style.borderRadius = "50px / 20px";

・50pxが水平（X軸）半径、 20px が垂直（Y軸）半径
・楕円形の角丸になる

borderRadius の個別設定

Javascript だは、各角を個別に設定することもできます。

//js

element.style.borderTopLeftRadius = "10px";   // 左上
element.style.borderTopRightRadius = "20px";  // 右上
element.style.borderBottomRightRadius = "30px"; // 右下
element.style.borderBottomLeftRadius = "40px"; // 左下

・borderTopLeftRadius、borderTopRightRadius、
borderBottomRightRadius、borderBottomLeftRadius で個別に指定できる

borderRadius のアニメーション

//js

let box = document.getElementById("box");

setInterval(() => {
  let randomRadius = Math.floor(Math.random() * 50);
  box.style.borderRadius = `${randomRadius}px`;
}, 500);

・setInterval を使って、border-radius をランダムに変更

borderRadius のルールまとめ

指定方法	記述例	説明
1つの値	“ 20px ”	四隅すべて同じ
2つの値	“ 20px 10px ”	左上・右下→ 20px、右上・左下→ 10px
4つの値	“ 10px 20px 30px 40px ”	左上→ 10px、右上→ 20px、右下→ 30px、左下→ 40px
/付き	“ 50px / 20px ”	水平 50px、垂直 20px （楕円形）
個別指定	borderTopLeftRadius=“ 10px ”	左上だけ 10px