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.
border-top-left-radius: value; object.style.borderTopLeftRadius = "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-top-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>
<!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-top-left-radius</p>
<p>border-top-left-radius</p>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
for(const myp of document.querySelectorAll("p"))
{
myp.style.borderTopLeftRadius = myproperty;
}
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>