CSS border-bottom-right-radius Round Bottom-Right Corners

Introduction

The border-bottom-right-radius CSS property is used to round the bottom-right corner of an element. This property lets you specify the radius or dimensions of the ellipse that defines the corner’s curvature. Whether you want a circular or elliptical shape, or no rounding at all, this property gives you the flexibility to customize the appearance of your element’s corners.

This property is part of the CSS Backgrounds and Borders Module Level 3 specification, which ensures consistent and standardized implementation across different web browsers.

Specification

The border-bottom-right-radius property is defined in the CSS Backgrounds and Borders Module Level 3 specification. This module outlines the properties that control the appearance of borders and backgrounds, including the ability to round corners with properties like border-bottom-right-radius.

Description

The border-bottom-right-radius CSS property allows you to round the bottom-right corner of an element. You can specify the radius of the curve, or the dimensions of the ellipse that define the corner’s curvature. This property supports both circular and elliptical shapes, or you can choose to have no rounding at all, making the corner square.

When a background is applied to an element, it is clipped at the border, including any rounded corners. The exact location of the clipping is determined by the value of the background-clip property.

It’s important to note that if the border-bottom-right-radius property is later overridden by the border-radius shorthand property, the value of border-bottom-right-radius will be reset to its initial value.

Syntax

The syntax for the border-bottom-right-radius property is straightforward and allows for various values to define the shape of the corner. Here’s how you can use it:

/* The corner is a circle */
border-bottom-right-radius: 3px;

/* Percentage values */
border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-right-radius: 20% 20%; /* same as above */
border-bottom-right-radius: 20% 10%; /* 20% of horizontal (width) and 10% of vertical (height) */

/* The corner is an ellipse */
border-bottom-right-radius: 0.5em 1em;

/* Global values */
border-bottom-right-radius: inherit;
border-bottom-right-radius: initial;
border-bottom-right-radius: revert;
border-bottom-right-radius: revert-layer;
border-bottom-right-radius: unset;

Values

The border-bottom-right-radius property accepts various values to define the shape and size of the bottom-right corner of an element. These values can be specified using lengths, percentages, or global keywords.

Length or Percentage

• Single Value: When one value is provided, it defines the radius of the circle used for the border corner. This value can be a length (like px, em, rem, etc.) or a percentage.
  • Example: border-bottom-right-radius: 3px;
  • Example: border-bottom-right-radius: 20%;
• Two Values: When two values are provided, the first value defines the horizontal semi-major axis of the ellipse, and the second value defines the vertical semi-major axis of the ellipse. Both values can be lengths or percentages.
  • Example: border-bottom-right-radius: 0.5em 1em;
  • Example: border-bottom-right-radius: 20% 10%;

Global Values

• inherit: Inherits the value from the parent element.
  • Example: border-bottom-right-radius: inherit;
• initial: Sets the value to its default, which is 0.
  • Example: border-bottom-right-radius: initial;
• revert: Reverts the value to the user-agent’s default (browser’s default style).
  • Example: border-bottom-right-radius: revert;
• revert-layer: Reverts the value to the default for the layer it belongs to.
  • Example: border-bottom-right-radius: revert-layer;
• unset: Resets the value to its inherited value if it inherits, or to its initial value if it does not.
  • Example: border-bottom-right-radius: unset;

Formal Definition

The border-bottom-right-radius property is formally defined with specific characteristics and behaviors. Here are the key points of its formal definition:

• Initial Value: The initial value for border-bottom-right-radius is 0, which means no rounding is applied to the bottom-right corner.
• Applies To: This property applies to all elements. However, user agents are not required to apply this property to table and inline-table elements when the border-collapse property is set to collapse. The behavior on internal table elements is currently undefined. It also applies to the ::first-letter pseudo-element.
• Inherited: This property is not inherited from parent elements.
• Percentages: When percentages are used, they refer to the corresponding dimension of the border box. For example, a horizontal percentage refers to the width of the box, and a vertical percentage refers to the height of the box.
• Computed Value: The computed value consists of two absolute lengths or percentages.
• Animation Type: The property can be animated using a length, percentage, or calc() function.

Formal Syntax

The formal syntax for the border-bottom-right-radius property is defined as follows:

border-bottom-right-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length> | <percentage>

Explanation:

• <length-percentage [0,∞]>{1,2}: This indicates that the property can accept one or two values, which can be lengths or percentages. The values must be non-negative.
• <length>: Represents a length value, such as px, em, rem, etc.
• <percentage>: Represents a percentage value, which is relative to the corresponding dimension of the border box.

Examples

Here are some practical examples of how to use the border-bottom-right-radius property to create various rounded corner effects.

Arc of a Circle

A single <length> value produces an arc of a circle.

<div class="circle-arc"></div>

.circle-arc {
  border-bottom-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Arc of an Ellipse

Two different <length> values produce an arc of an ellipse.

<div class="ellipse-arc"></div>

.ellipse-arc {
  border-bottom-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Square Element with Percentage Radius

A square element with a single <percentage> value produces an arc of a circle.

<div class="square-percentage"></div>

.square-percentage {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Non-Square Element with Percentage Radius

A non-square element with a single <percentage> value produces an arc of an ellipse.

<div class="non-square-percentage"></div>

.non-square-percentage {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

Example: Combining Multiple Effects

You can also combine multiple effects to create more complex shapes.

<div class="combined-effects"></div>

.combined-effects {
  border-bottom-right-radius: 30% 15%;
  background-color: lightblue;
  border: solid 1px black;
  width: 150px;
  height: 100px;
}

Example: Using Global Values

Global values like inherit, initial, revert, revert-layer, and unset can also be used.

<div class="global-values"></div>

.global-values {
  border-bottom-right-radius: inherit;
  background-color: lightcoral;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Browser Compatibility

The border-bottom-right-radius property is well-supported across modern browsers, ensuring consistent display across different platforms and devices. Here’s a quick overview:

See Also

If you found border-bottom-right-radius useful, you might also be interested in these related properties:

• border-radius: The shorthand property for setting the radius of all four corners.
• border-top-right-radius: Similar to border-bottom-right-radius, but for the top-right corner.
• border-bottom-left-radius: Rounds the bottom-left corner.
• border-top-left-radius: Rounds the top-left corner.
• CSS Borders Tutorial: A guide on styling borders with CSS.
• CSS border-radius Property Reference: Detailed documentation on the border-radius property.
• HTML Reference Guide: A resource for understanding HTML elements and attributes.