HTML DOM Style borderRadius Property

HTMLDOMWeb DevelopmentFront End Technology

The HTML DOM borderRadius propert is used to add rounded corners to the element’s four sides. Using this property, we can set and get the border radius properties like borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius.

Following is the syntax for −

Setting the borderRadius property:

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

The property values are explained as follows −

ValueDescription
lengthFor defining the borders shape.
%For defining the borders shape in percentage.
initialFor setting this property to initial value.
inheritTo inherit the parent property value

Let us look at an example for the borderRadius property −

Example

 Live Demo

<!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="The border radius for the four borders of the above div are now increased";
   }
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Increase the above div border radius size by clicking the below button</p>
<button onclick="changeBorderRadius()">Change Border Radius</button>
<p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change Border Radius” button −

raja
Published on 22-Oct-2019 17:31:14
Advertisements