CSS border-bottom-right-radius Property

CSS border-bottom-right-radius Property

CSS border-bottom-right-radius Property


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.

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.

In the cases when the value of the CSS border-bottom-right-radius property isn’t set to the border-radius shorthand property applied to the element that comes after the border-bottom-right-radius property, the shorthand property then resets that value to its initial value.
Initial Value0
Applies toAll elements. It also applies to ::first-letter.
InheritedNo.
AnimatableYes. The radius of the bottom right border is animatedly.
VersionCSS3
DOM Syntaxobject.style.borderBottomRightRadius = "15px";

Syntax

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

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

<!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>

Example of the border-bottom-right-radius property 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>

Example of the border-bottom-right-radius property with the "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>

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

Reactions

Post a Comment

0 Comments

close