CSS - border-top-right-radius Property

Quiz

CSS border-top-right-radius property controls the roundness of the top-right corner of an element's border.

Syntax

border-top-right-radius: length | percentage | initial | inherit;

Property Values

Value	Description
length	It defines the roundness of the top-right border using length values.
percentage	It defines the roundness of the top-right border using percentage values.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Top Right Radius Property

The following examples explain the border-top-right-radius property with different values.

Border Top Right Property with Length Values

To set the roundness of the top right border, we can specify the radius in length values (e.g. 10px, 15px 20px etc.).Single value applies to both top and right border, with two values, the first value is applied to top border and second value to right border. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         background-color: lightblue;
         text-align: center;
         padding: 10px;
         border: 3px solid blue;
         width: 200px;
         height: 200px;
      }

      .box1 {
         border-top-right-radius: 50px;
      }

      .box2 {
         border-top-right-radius: 70px 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS boder-top-right-radius property
   </h2>
   <h3>
      Single Value: 50px (applies to both top and right borders)
   </h3>
   <div class="rounded-border box1">
      <p>top-right rounded corner.</p>
   </div>
   <h3>
      Two Values: 70px 80px (70px applies to top border
      and 80px applies to right border)
   </h3>
   <div class="rounded-border box2">
      <p>top-right rounded corner.</p>
   </div>
</body>

</html>

Border Top Right Property with Percentage Values

To set the roundness of the top right border, we can specify the radius in percentage values (e.g. 10%, 15% 20% etc.).Single value applies to both top and right border, with two values, the first value is applied to top border and second value to right border. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-border {
         background-color: lightblue;
         text-align: center;
         padding: 10px;
         border: 3px solid blue;
         width: 200px;
         height: 200px;
      }

      .box1 {
         border-top-right-radius: 30%;
      }

      .box2 {
         border-top-right-radius: 30% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS boder-top-right-radius property
   </h2>
   <h3>
      Single Value: 30% (applies to both top and right borders)
   </h3>
   <div class="rounded-border box1">
      <p>top-right rounded corner.</p>
   </div>
   <h3>
      Two Values: 30% 50% (30% applies to top border
      and 50% applies to right border)
   </h3>
   <div class="rounded-border box2">
      <p>top-right rounded corner.</p>
   </div>
</body>

</html>

Supported Browsers

Property
border-top-right-radius	5.0	9.0	4.0	5.0	10.5

css_reference.htm

Print Page