The border-radius property defines the radius of an element’s corners to give the element rounded corners. This property can have from one to four values.

/* all borders have an equal radius */
div {
    border-radius: 20px;
}

/* the first value is for the top-left and bottom-right corners; the second value is for the top-right and bottom-left corners */
div {
    border-radius: 20px 50px;
}

/* the first value is for the top-left corner; the second value is for the top-right and bottom-left corners; and the third value is for the bottom-right corner*/
div {
    border-radius: 20px 50px 5px;
}

/* the first value is for the top-left corner; the second value is for the top-right corner; the third value is for the bottom-right corner; and the fourth value is for the bottom-left corner*/
div {
    border-radius: 20px 50px 100px 5px;
}

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

These are the allowed values.

Value	Description
length	Defines the shape of the corners (default value is 0)
%	Defines the shape of the corners 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.borderRadius = '20px';

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

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

---