border-bottom-right-radius - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-bottom-right-radius

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-bottom-right-radius

Description

The border-bottom-right-radius CSS property sets the rounded 'bottom-right' corner.

The following table summarizes the border-bottom-right-radius Property.

Item Value
Default value: 0
Applies to:All elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


border-bottom-right-radius:     [ length | percentage ]1 or 2 values | initial | inherit

This shorthand notation can take one, or two whitespace separated values.

Property Values

The following table describes the values of this property.

Value Description
length A length value in px, pt, cm, em, etc. Negative values are not allowed.
percentage The size of the radius in percentage. In case of two values, percentage for the first value is calculated against the width of the element's box, while percentage for the second value is calculated against the height of the element's box. Negative values are not allowed.
initialSets this property to its default value.
inherittake the value of its parent element border-bottom-right-radius property.

The example below shows the border-bottom-right-radius property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 border-bottom-right-radius property</title>
  <style type="text/css">
      div {<!--   w  ww  .j  av  a 2  s.com-->
          padding: 15px;
          background: #ffb6c1;
          border: 2px solid #f08080;
          border-bottom-right-radius: 20px;
      }
  </style>
 </head>
 <body>
  <div>
   The
   <code>border-bottom-right-radius</code> property defines the shape of the bottom-left border corner of an element.
  </div>
 </body>
</html>

Related Tutorials