CSS - border-top-right-radius Property

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

Possible Values

  • <length>: Size of circle radius is denoted, using length values. Negative values are not valid.

  • <percentage>: Size of circle radius is denoted, using percentage values.

    • Horizontal axis percentage is referred to the width of the box.

    • Vertical axis percentage is referred to the height of the box.

    • Negative values are not valid.

Applies to

All the HTML elements, except for table and inline-table elements with border-collapse set to collapse. Applies to ::first-letter.

DOM Syntax

object.style.borderTopRightRadius = "length";
If you set the border-top-right-radius property and then set the border-radius shorthand property, the border-top-right-radius property will be reset to its default value.

CSS border-top-right-radius - <length> Value

Here is an example of how to create top-right rounded corner using length value −

<html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      border-top-right-radius: 50px;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="rounded-border">
      top-right rounded corner box.
   </div>
</body>
</html>

CSS border-top-right-radius - <percentage> Value

Here is an example of how to create top-right rounded corner using percentage value −

<html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      border-top-right-radius: 25%;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="rounded-border">
      top-right rounded corner box.
   </div>
</body>
</html>

CSS border-top-right-radius - With Animation

Here is an example of how to create a top-right rounded corner with an animation −

<html>
<head>
<style>
   .rounded-border {
      background-color: pink;
      border: 3px solid green;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
      animation: animatedRadius 5s infinite;
   }
   @keyframes animatedRadius {
      50% { border-top-right-radius: 100px; }
   }
</style>
</head>
<body>
   <div class="rounded-border">
      top-right rounded corner with animation.
   </div>
</body>
</html>

CSS border-top-right-radius - With Different Shapes

You can use the border-top-right-radius property to create different shapes for the top-right rounded corner of an element.

Here is an example −

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
   }
   .rounded-box.circle-arc {
      border-top-right-radius: 35px;
   }
   .rounded-box.ellipse-arc {
      border-top-right-radius: 75px 35px;
   }
   .rounded-box.square-per {
      border-top-right-radius: 30%;
   }
   .non-square-per {
      border-top-right-radius: 30%;
      width: 200px;
      height: 100px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
   }
</style>
</head>
<body>
   <h3>Different shapes using border-top-right-radius property</h3>
   <div class="rounded-box circle-arc">
      Arc of an circle.
   </div>
   <div class="rounded-box ellipse-arc">
      Arc of an ellipse.
   </div>
   <div class="rounded-box square-per">
      Square element with % radius.
   </div>
   <div class="non-square-per">
      Non-square element with % radius.
   </div>
</body>
</html>

CSS border-top-right-radius - With Image

You can add a rounded border to the top-right corner of an image using border-top-right-radius property.

Here is an example −

<html>
<head>
<style>
   .img-border-radius {
      background-image: url(images/tree.jpg);
      border-top-right-radius: 6em;
      background-size: 100% 100%;
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="img-border-radius">
      top-right rounded corner image.
   </div>
</body>
</html>
Advertisements