The first value is the horizontal radius and the second value is the vertical radius. If the second value is omitted, the first value is the horizontal radius and the vertical radius.
CSS
border-bottom-left-radius: value;
JS
object.style.borderBottomLeftRadius = "value";
Values
<'border-bottom-left-radius'> = <length-percentage [0,∞]>{1,2}
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
Initial
length
percentage
<!doctype html>
<html>
<head>
<style>
p
{
background-color: red;
border-bottom-left-radius: 40% 20%;
padding: 20px;
}
p:nth-of-type(2)
{
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<p>percentage</p>
<p>percentage</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
p
{
background-color: red;
padding: 20px;
}
p:nth-of-type(2)
{
writing-mode: vertical-rl;
}
</style>
<script>
function myfunction(myvar)
{
var elements = document.querySelectorAll("p");
for(var element of elements)
{
element.style.borderBottomLeftRadius = myvar;
}
}
</script>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(value)" value="40px 20px">length</button>
<button onmouseover="myfunction(value)" value="40% 20%">percentage</button>
<p>border-bottom-left-radius</p>
<p>border-bottom-left-radius</p>
</body>
</html>
Internal
External