CSS border-bottom-right-radius Property

The border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element.

The border-bottom-right-radius property specifies the horizontal and vertical radii that defines the rounded lower-right corner for a border box. This property is specified by two values: length and percentages.

When only one value is given, it specifies both horizontal and vertical radii of the ellipse. If two values are given, the first sets the horizontal radius and the second sets the vertical radius. If no value is defined, the border is square. If using a background image or color, it will be clipped at the border. The process of clipping is defined by the value of background-clip property.

Initial Value 0
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. The radius of the bottom right border is animatable.
Version CSS3
DOM Syntax object.style.borderBottomRightRadius = "15px";

Syntax

border-bottom-right-radius: length | % | initial | inherit;

Let’s try some examples with one value.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      height: 40px;
      background: #1c87c9;
      border: 4px solid #000000;
      border-bottom-right-radius: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Border-bottom-right-radius example.</h2>
    <div></div>
  </body>
</html>

Now let’s try another example where two values are specified.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      height: 40px;
      background: #eee;
      border: 4px solid #666;
      border-bottom-right-radius: 30px 15px;
      }
    </style>
  </head>
  <body>
    <h2>Border-bottom-right-radius example.</h2>
    <div></div>
  </body>
</html>

Let’s define values by percentages.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      height: 40px;
      background: #8ebf42;
      border: 4px solid #000000;
      border-bottom-right-radius: 30% 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-bottom-right-radius example.</h2>
    <div></div>
  </body>
</html>

Values

Value Description
length Specifies shaping of the bottom-right corner by "px".
% Specifies the shaping of the bottom-right corner in percentage.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

4.0+ 12.0+ 4.0+ 5.0+ 10.5+




Related articles