The border-top-right-radius property defines the radius of the top-right corner, giving it a rounded look.

/* set a uniform roundness to the corner */
div {
    border-top-right-radius: 20px;
}

/* set a skewed roundness to the corner */
div {
    border-top-right-radius: 40px 20px;
}

Default value	0
Inherited values	no
Can it be animated?	yes

These are the allowed values.

Value	Description
length	Defines the shape of the top-right corner (default value is 0)
%	Defines the shape of the top-right corner in %
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.borderTopRightRadius = '20px';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.borderTopRightRadius = '20px';
}
</script>

---