CSS border-bottom-right-radius Property

What You’ll Learn

The border-bottom-right-radius property rounds the bottom-right corner of an element. It is useful when you want one curved corner without affecting the other three.

Definition and Usage

The border-bottom-right-radius CSS property defines the rounding of the bottom-right corner of an element’s border box. This property is particularly useful when you want rounded corners on specific sides without affecting the other corners.

By customizing just the bottom-right corner, you can create subtle design touches such as angled cards, speech bubbles, tab shapes, and asymmetric layouts that feel more dynamic than fully square boxes.

📝 Syntax

The syntax for border-bottom-right-radius lets you use one value for a circular corner or two values for an elliptical corner:

selector {
  border-bottom-right-radius: <length> | <percentage>;
}

/* elliptical corner */
selector {
  border-bottom-right-radius: <horizontal> / <vertical>;
}

Basic Example

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  border-bottom-right-radius: 20px;
}

A length value such as 10px or 1em sets a fixed curve. A percentage is relative to the element’s width and height.

Syntax Rules

• This property affects only the bottom-right corner.
• The default value is 0, which means a square corner.
• One value creates a circular corner radius on both axes.
• Two values separated by / create an elliptical corner.
• It works on elements with or without visible borders.

Default Value

The default value of border-bottom-right-radius is 0. That means the bottom-right corner is not rounded unless you set a radius value.

💎 Property Values

border-bottom-right-radius accepts length, percentage, and elliptical values.

Common Value Types

Physical Bottom-Right Corner

border-bottom-right-radius always rounds the visual bottom-right corner of an element, even when writing mode changes. For writing-mode-aware corner rounding, consider border-end-end-radius instead.

border-bottom-right-radius vs related properties

Examples Gallery

Try border-bottom-right-radius with fixed lengths, percentages, elliptical corners, and bordered cards.

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    border-bottom-right-radius: 20px;
  }
</style>

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  border-bottom-right-radius: 50%;
}

.panel {
  width: 14rem;
  height: 5rem;
  background: #059669;
  border-bottom-right-radius: 40px / 10px;
}

.card {
  border: 2px solid #cbd5e1;
  padding: 1rem;
  background: #fff;
  border-bottom-right-radius: 1.5rem;
  max-width: 16rem;
}

💡 Best Practices