CSS border-top-right-radius Property

Definition and Usage

The border-top-right-radius property rounds the physical top-right corner of an element. One value makes a circular arc; two values make an elliptical corner.

Unlike border-start-end-radius, this corner never moves with writing mode or direction. For all four corners at once, use border-radius.

CSS Syntax

One value makes a circular arc. Two values set horizontal then vertical radii for an ellipse. Negative values are invalid. Initial value is 0.

Property Values

How to Use border-top-right-radius

Round only the top-right corner when the other corners should stay square.

1. Choose the element that needs a rounded top-right corner.
2. Set border-top-right-radius with a length, percentage, or two values.
3. Give the box a visible background or border so the curve is easy to see.
4. Leave the other corners alone, or set them separately if the design needs it.

Live Preview

Change border-top-right-radius and watch only the top-right corner update.

CSS Examples

Each snippet focuses on border-top-right-radius only. Use Try It Yourself for a live editor.

<style>
  div {
    width: 200px;
    height: 100px;
    background: #2563eb;
    border: 2px solid #1e3a8a;
    border-top-right-radius: 24px;
  }
</style>

<div>Top-right</div>

<style>
  div {
    width: 220px;
    height: 80px;
    background: #0f766e;
    border: 2px solid #115e59;
    border-top-right-radius: 40px 12px;
  }
</style>

<div>Ellipse</div>

<style>
  div {
    width: 120px;
    height: 120px;
    background: #2563eb;
    border: 2px solid #1e3a8a;
    border-top-right-radius: 50%;
  }
</style>

<div>50%</div>

Key Takeaways