CSS border-bottom-right-radius (Set/Change Radius of Bottom Right Border)

The CSS border-bottom-right-radius property is used when we need to define the radius of right bottom border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {padding: 14px; border: 4px solid darkgoldenrod; border-bottom-right-radius: 25px;}
   </style>
</head>
<body>

   <p>This is a para.</p>

</body>
</html>

Output

This is a para.

CSS border-bottom-right-radius Syntax

The syntax of border-bottom-right-radius in CSS, is:

border-bottom-right-radius: value;

The value should be any of the following four:

length - used to define the shape based on the length
% - used to define the shape based on percentage
initial - used to set the default
inherit - used to inherit the value from its parent

Note - To define the bottom and right border separately to shape the required border, provide two values. The first value refers to the bottom, whereas the second value refers to the right border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {padding: 24px; border: 4px solid crimson; border-bottom-right-radius: 60px 30px;}
      p.two {padding: 24px; border: 4px solid crimson; border-bottom-right-radius: 30px 60px;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>

</body>
</html>

Output

This is para one.

This is para two.

CSS Online Test

« Previous Tutorial Next Tutorial »