Javascript Reference - HTML DOM Style borderRadius Property








The borderRadius property gets and sets the shorthand property for the four border-*-Radius properties.

Browser Support

borderRadius Yes 10.0 Yes Yes Yes

Syntax

Return the borderRadius property:

var v = object.style.borderRadius

Set the borderRadius property:

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

The borderRadius uses the following rules to deal with the missing values.

  • The four values are given in the order top-left, top-right, bottom-right, bottom-left.
  • If bottom-left is omitted it is the same as top-right.
  • If bottom-right is omitted it is the same as top-left.
  • If top-right is omitted it is the same as top-left.




Property Values

Value Description
length Set the size in length unit. Default value is 0
% Set the size of the corners in percent
initial Set to default value
inherit Inherit from parent element.

Technical Details

Default Value: 0
Return Value: A string representing the border-radius property
CSS Version CSS3




Example

The following code shows how to add rounded borders to a div element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from   w  w w .  j  a  v  a  2 s. co  m-->
    border: 1px solid black;
    width: 300px;
    height: 300px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">Hello</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.borderRadius = "25px";
}
</script>

</body>
</html>

The code above is rendered as follows: