Javascript Reference - HTML DOM Style borderBottomLeftRadius Property

The borderBottomLeftRadius property sets or gets the shape of the border of the bottom-left corner.

Browser Support


`borderBottomLeftRadius`	Yes	10.0	Yes	Yes	Yes

Syntax

Return the borderBottomLeftRadius property:

var v = object.style.borderBottomLeftRadius

Set the borderBottomLeftRadius property:

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

Property Values

Value	Description
length	set the length for radius
%	set percentage size for radius

Technical Details

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

Example

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


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from  w w  w.  j ava2s.  c o  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.borderBottomLeftRadius = "25px";
}
</script>

</body>
</html>

The code above is rendered as follows: