The border-radius CSS property is shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
The first set of values are the horizontal radii and the second set of values are the vertical radii. A forward slash (/) separates the first set of values from the second set of values.
object.style.borderRadius = "value"; <'border-radius'> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]? <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-radius: 40% 20% 10% 0 / 40% 20% 10% 0;
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 10px 0 / 40px 20px 10px 0">length</button>
<button onmouseover="myfunction(value)" value="40% 20% 10% 0 / 40% 20% 10% 0">percentage</button>
<p>border-radius</p>
<p>border-radius</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.borderRadius = 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 10px 0 / 40px 20px 10px 0">length</button>
<button value="40% 20% 10% 0 / 40% 20% 10% 0">percentage</button>
<p>border-radius</p>
<p>border-radius</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.borderRadius = 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>