The mapping depends on the element's writing-mode, direction, and text-orientation. The first value is the block radius and the second value is the inline radius. If the second value is omitted, the first value is the block radius and the inline radius.
border-end-start-radius: value; object.style.borderEndStartRadius = "value"; <'border-top-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 (%).
<!doctype html>
<html>
<head>
<style>
p
{
background-color: red;
border-end-start-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>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: red;
padding: 20px;
}
p:nth-of-type(2)
{
writing-mode: vertical-rl;
}
</style>
</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-end-start-radius</p>
<p>border-end-start-radius</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.borderEndStartRadius = myparameter;
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: red;
padding: 20px;
}
p:nth-of-type(2)
{
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<button>initial</button>
<button value="40px 20px">length</button>
<button value="40% 20%">percentage</button>
<p>border-end-start-radius</p>
<p>border-end-start-radius</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.borderEndStartRadius = myparameter;
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>