Javascript Reference - HTML DOM Style borderTopLeftRadius Property








The borderTopLeftRadius property sets or gets the radius of the border of the top-left corner.

Browser Support

borderTopLeftRadius Yes 10.0 Yes Yes Yes

Syntax

Return the borderTopLeftRadius property:

var v = object.style.borderTopLeftRadius

Set the borderTopLeftRadius property:

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

Property Values

Value Description
length Set the radius of the top-left corner
% Set the radius of the top-left 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-left-radius property of an element
CSS Version CSS3

Example

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


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--   w w w  . jav a2  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.borderTopLeftRadius = "25px";
}
</script>

</body>
</html>

The code above is rendered as follows: