CSS - border-end-end-radius Property

CSS border-end-end-radius property defines the radius of the corner between the block-end and inline-end sides of an element.

This property is a logical border radius, which means that its value depends on the element's writing mode, direction, and text orientation.

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. It also applies to ::first-letter.

DOM Syntax

object.style.borderEndEndRadius = "length";

CSS Border End End Radius - Length Value

Here is an example of how to create block-end and inline-end rounded corner using length value −

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-end-end-radius: 60px 60px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-end and inline-end rounded corner.
   </div>
</body>
</html>

CSS Border End End Radius - Percentage Value

Here is an example of how to create block-end and inline-end rounded corner using percentage value −

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-end-end-radius: 30% 30%;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-end and inline-end rounded corner.
   </div>
</body>
</html>

CSS Border End End Radius With Animation

Here is an example of how to create block-end and inline-end 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-end-end-radius: 100px; }
   }
</style>
</head>
<body>
   <div class="rounded-border">
      block-end and inline-end rounded corner with animation.
   </div>
</body>
</html>

CSS Border End End Radius - Direction RTL

The following example demonstrates how to use the border-end-end-radius and direction: rtl property to create a rounded block-end and inline-end corner of an element in a right-to-left direction −

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
      border-end-end-radius: 120px 60px;
      direction: rtl
   }
</style>
</head>
<body>
   <div class="rounded-box">
      block-end and inline-end rounded corner using direction: rtl
   </div>
</body>
</html>

CSS Border End End Radius - Writing-mode

We can use the border-end-end-radius property with writing-mode: vertical-lr, it arranges text vertically from top to bottom and left to right. Similarly, with writing-mode: vertical-rl, it arranges text vertically from top to bottom and right to left.

Here is an example −

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      margin: 10px;
   }
   .top-left-lr {
      border-end-end-radius: 30%;
      writing-mode: vertical-lr;
   }
   .top-left-rl {
      border-end-end-radius: 30%;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <div class="rounded-box top-left-lr">
      block-end and inline-end rounded corner using vertical-lr.
   </div>
   <div class="rounded-box top-left-rl">
      block-end and inline-end rounded corner using vertical-rl.
   </div>
</body>
</html>

CSS Border End End Radius - Vertical Text

The following example demonstrates how to use the border-end-end-radius property to create a rounded block-end and inline-end corner with vertical text −

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      background-color: pink;
      border: 3px solid green;
      border-end-end-radius: 40%;
   }
   .text-box {
      writing-mode: vertical-rl;
      background-color: yellow;
      border: 3px solid blue;
      border-end-end-radius: 20%;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      <p class="text-box">block-end and inline-end rounded corner.</p>
   </div>
</body>
</html>

CSS border-end-end-radius - Related Properties

Following is the list of CSS properties related to border-end-end-radius:

property value
writing-mode Sets the writing direction of an element either vertically and horizontally.
direction Sets the direction of text
text-orientation Sets the orientation of the characters in a line.
Advertisements