JavaScript – Change the Border Radius of HTML Element

To change the border radius of a HTML Element using JavaScript, get reference to this HTML element, and assign required border radius value to the element.style.borderRadius property.

In the following example, we will change the border radius of HTML Element with id "myElement" to "10px", in JavaScript, using element.style.borderRadius property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:3px solid red;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Change Border Radius of HTML Element in JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.borderRadius = "10px";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to change the border radius of a HTML Element using JavaScript.