
The CSS border-bottom-right-radius property specifies the radius of the bottom right corner.

Demo:
Click the button to change the border-bottom-right-radius property (50px) of the DIV element:
Hello
Syntax:
border-bottom-right-radius: length;
length – specifies the shape of the bottom-left corner (px/%).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 3px solid #2a9d8f;
padding: 10px;
border-bottom-right-radius: 25px;
}
#example2 {
border: 3px solid #2a9d8f;
padding: 10px;
border-bottom-right-radius: 50px 20px;
}
#example3 {
border: 3px solid #2a9d8f;
padding: 10px;
border-bottom-right-radius: 50%;
}
</style>
</head>
<body>
<h4>border-bottom-right-radius: 25px;</h4>
<div id="example1">
<p>The border-bottom-right-radius property defines the radius of the bottom-right corner.</p>
</div>
<h4>border-bottom-right-radius: 50px 20px;</h4>
<div id="example2">
<p>If two values are set; the first one is for the bottom border, the second one for the right border.</p>
</div>
<h4>border-bottom-right-radius: 50%;</h4>
<div id="example3">
<p>The CSS border-bottom-right-radius property is set to 50%.</p>
</div>
</body>
</html>
Output:
border-bottom-right-radius: 25px;
The border-bottom-right-radius property defines the radius of the bottom-right corner.
border-bottom-right-radius: 50px 20px;
If two values are set; the first one is for the bottom border, the second one for the right border.
border-bottom-right-radius: 50%;
The CSS border-bottom-right-radius property is set to 50%.
Enjoy coding!
Read also: