W3docs
en
Log in

CSS border-bottom-right-radius Property

The border-bottom-right-radius is a CSS property which defines the rounding of the bottom right corner of an element. Find information about this property and try examples for yourself

The border-bottom-right-radius CSS property is used to set the rounding of the bottom-right corner of the element.

The border-bottom-right-radius property is one of the CSS3 properties.

The border-bottom-right-radius property specifies the horizontal and vertical radii that define the rounded lower-right corner for a border box. This property is specified by two values: length and percentages. Note that percentage values are calculated relative to the element's width.

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 radius defaults to 0px, resulting in a square corner. If using a background image or color, it will be clipped at the border. The process of clipping is defined by the value of the background-clip property.

Info

If the border-radius shorthand property is applied after border-bottom-right-radius, it will override the longhand value.

Initial Value0
Applies toAll elements. It also applies to ::first-letter.
InheritedNo.
AnimatableYes. The radius of the bottom right border is animatable.
VersionCSS3
DOM Syntaxobject.style.borderBottomRightRadius = "15px";

Syntax

CSS border-bottom-right-radius Property

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

Example of the border-bottom-right-radius property:

CSS border-bottom-right-radius Property example with one value

<!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>
Try it Yourself »

Result

CSS border-bottom-right-radius Property

Example of the border-bottom-right-radius property with two values:

CSS border-bottom-right-radius Property example with two values

<!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>
Try it Yourself »

Example of the border-bottom-right-radius property with the "percentage" value:

CSS border-bottom-right-radius Property example with a percentage value

<!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>
Try it Yourself »

Values

ValueDescriptionPlay it
lengthSpecifies shaping of the bottom-right corner by "px".Play it »
%Specifies the shaping of the bottom-right corner in percentage.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

Which statements about the CSS border-bottom-right-radius property are true?