Javascript Reference - HTML DOM Style borderTopRightRadius Property








The borderTopRightRadius property sets and gets the radius of the border of the top-right corner.

Browser Support

borderTopRightRadius Yes 10.0 Yes Yes Yes

Syntax

Return the borderTopRightRadius property:

var v = object.style.borderTopRightRadius

Set the borderTopRightRadius property:

object.style.borderTopRightRadius='length|%[length|%]|initial|inherit

Property Values

Value Description
length Set the radius of the top-right corner
% Set the radius of the top-right corner in percent
initial Set to default value
inherit Inherit from parent element.




Technical Details

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

Example

The following code shows how to add a rounded border to the top-right corner of a div element


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from  ww w. j  a v a 2s  .  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.borderTopRightRadius = "25px";
}
</script>

</body>
</html>

The code above is rendered as follows: