CSS border-bottom-right-radius Property

Definition and Usage

The border-bottom-right-radius property rounds the physical bottom-right corner of an element. One value draws a circular arc. Two values draw an elliptical arc (horizontal radius, then vertical radius).

It is a longhand of border-radius. Related corners are border-bottom-left-radius, border-top-left-radius, and border-top-right-radius. For a writing-mode-aware corner, use border-end-end-radius in horizontal left-to-right layout.

CSS Syntax

The initial value is 0. Negative values are invalid. Percentages use the box width for the horizontal axis and the box height for the vertical axis.

Property Values

How to Use border-bottom-right-radius

Give the box a background or border so the curve is visible, then round only the bottom-right corner.

1. Create a box with a background color or a border so the corner is easy to see.
2. Set border-bottom-right-radius to a length such as 40px.
3. Use two values when you want an elliptical corner.
4. Leave the other corners alone, or set them with their own longhands / border-radius.

Live Preview

Only the bottom-right corner changes. The other three corners stay square.

CSS Examples

Each snippet rounds only the bottom-right corner. A background makes the curve easy to see. Use Try It Yourself for a live editor.

<style>
  div {
    width: 200px;
    height: 100px;
    background: #2563eb;
    border-bottom-right-radius: 40px;
  }
</style>

<div></div>

<style>
  div {
    width: 200px;
    height: 100px;
    background: #2563eb;
    border-bottom-right-radius: 40px 16px;
  }
</style>

<div></div>

<style>
  div {
    width: 200px;
    height: 100px;
    background: #2563eb;
    border-bottom-right-radius: 50%;
  }
</style>

<div></div>

Key Takeaways