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

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

/* set a skewed roundness to the corner */
div {
    border-top-left-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-left corner (default value is 0)
%	Defines the shape of the top-left 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.borderTopLeftRadius = '20px';

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

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

---