CSS border-bottom-right-radius Property

CSS border-bottom-right-radius property is used to set the radius for bottom-right corner of the HTML Element(s).

border-bottom-right-radius property can be used to create a rounded corner to the HTML element.

border-bottom-right-radius can be set with the following values.

Note: border has to be set for the HTML Element(s) to let border-bottom-right-radius make the effect on the HTML element(s).

border-bottom-right-radius in Length Units

In the following example, we set border-bottom-right-radius with 20px.

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            border: 5px solid;
            border-bottom-right-radius: 50px;
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

border-bottom-right-radius in Percentage

In the following example, we take two div elements. We set border-bottom-right-radius with 50% for both the divs.

Using second div, we demonstrate how percentage values work for border-bottom-right-radius when length and width are different. The specified percentage of the width and length are considered for the corner radius.

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            border: 5px solid;
            height: 100px;
            display: inline-block;
            margin: 10px;
        }
        #div1 {
            border-bottom-right-radius: 50%;
            width: 100px;
            background: #d2ff8a;
        }
        #div2 {
            border-bottom-right-radius: 50%;
            width: 200px;
            background: #ff6347;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

border-bottom-right-radius: initial or inherit

initial sets the border-bottom-right-radius with its default value of 0.

inherit sets the border-bottom-right-radius with that of its parent.

Conclusion

In this CSS Tutorial, we learned about border-bottom-right-radius property, and how to use this property for HTML Elements, with examples.