CSS border-bottom-right-radius Property

CSS border-bottom-right-radius Property


CSS border-bottom-right-radius Property
This property is used to round the bottom-right border corner specifically. 
Syntax -
border-bottom-right-radius: horizontal-radius vertical-radius 
Now we will see The meaning of values -
length
Defines the shape of the bottom-right corner. The default value is 0. 
%
Defines the shape of the bottom-right corner in %
initial
Set this property to its default value. 
inherit
Inherits this property from its parent element.
 
Now we will see Examples –
Example -
<!DOCTYPE html>
<html>

<head>
    <style>
div{
    border: 3px solid red;-moz-border-radius-bottomright: 25px;
    -webkit-border-bottom-right-radius: 25px; border-bottom-right-radius: 25px;
}
    </style>
</head>

<body>

    <div>
    Bottom right corner
    </div>
</body>

</html>
Output -
Example - Giving value in percentage - 
 
Output -
 
NOTE -


Mozilla-based browsers like Firefox define this property as -moz-border-radiusbottomright while WebKit-based browsers like Chrome and Safari define it more traditionally as -webkit-border-bottom-right-radius.


Given the differences, you should test it carefully as syntax may change.