【初心者向け】JavaScriptでborder-radiusを指定する方法まとめ｜CSSとの違いと実例コード

CSSでよく使う border-radius は、JavaScriptからも簡単に指定できます。本記事では、四隅すべてを同じ値にする方法から、個別指定、楕円形、さらにはアニメーションまで具体的なコード例とともに解説します。JavaScriptで動的に角丸を操作したい方はぜひ参考にしてください。

borderRadius の基本

Javascript で指定する方法

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

borderRadius の指定方法

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

borderRadius の個別設定

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

borderRadius のアニメーション

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

・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

→javascript でborderRadius を操作するときは、
console.log(element.style.borderRadius);で現在の値を確認するとわかりやすい！
ぜひ試してみてください！

その他関連記事はこちら→Programming Notes