CSS border-end-end-radius Property

Posted in CSS Tutorial

Updated on Sep 04, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-end-end-radius property in CSS is used to control the radius of the end corner of a box's border in the end direction.

This property is particularly useful in bidirectional layouts, where you need to apply different border radii based on text directionality (left-to-right or right-to-left). It allows for more precise control of the rounded corners in responsive design.

💡 Syntax

The syntax for the border-end-end-radius property is:

Syntax

Copied

element {
  border-end-end-radius: radius;
}

Here, radius can be specified using various units, including pixels, ems, rems, or percentages.

🎛️ Default Value

The default value of the border-end-end-radius property is 0, meaning no rounding is applied to the end end corner unless explicitly set.

🏠 Property Values

Value	Description
length	Specifies the radius using a length value, such as 10px or 1em.
percentage	Specifies the radius as a percentage of the corresponding box dimension, such as 50%.
inherit	Inherits the value from the parent element.
initial	Sets the property to its default value, which is 0.
unset	Resets the property to its natural value, which can either be inherit or initial depending on the context.

📄 Example

In this example, we apply a border-radius to the end end corner of a block element, setting it to 20 pixels.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-end-end-radius Example</title>
  <style>
    .rounded-corner {
      border: 2px solid #000;
      border-end-end-radius: 20px;
      padding: 20px;
      width: 200px;
      height: 100px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Block with End-End Corner Radius</h1>
  <div class="rounded-corner">
    This block has a rounded end-end corner.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-end-end-radius property is supported in modern browsers that fully support the CSS Logical Properties specification. However, support may vary based on browser version and operating system. Testing across different environments is recommended to ensure consistent behavior.

🎉 Conclusion

The border-end-end-radius property provides enhanced control over the styling of box corners in bidirectional layouts.

By using this property, you can achieve more precise and adaptable designs, accommodating various text directions and improving the visual appeal of your website. Experiment with different values to see how this property can fit into your design strategy.