CSS border-end-start-radius Property

Posted in CSS Tutorial

Updated on Sep 04, 2024

By Mari Selvan

👁️ 11 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-end-start-radius property in CSS is used to define the radius of the corner where the end of the inline direction meets the start of the block direction, in a given element.

This property allows you to round a specific corner of an element, providing more control over the element's shape. It is part of the logical properties in CSS, which are designed to work well with different writing modes and text directions.

💡 Syntax

The syntax for the border-end-start-radius property is similar to other border-radius properties. You can define one or two values:

Syntax

Copied

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

value: Defines the radius for the corner. This can be in pixels (e.g., 10px), percentages (e.g., 50%), or any other valid CSS length unit.

🎛️ Default Value

The default value of the border-end-start-radius property is 0, meaning no rounding will be applied to the corner.

🏠 Property Values

Value	Description
length	Specifies the radius using a length value (e.g., 10px, 2em).
percentage	Specifies the radius as a percentage of the corner's size (e.g., 50%).
initial	Sets the property to its default value (0).
inherit	Inherits the value from its parent element.

📄 Example

In this example, we'll round the border-end-start corner of a div element with a radius of 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-start-radius Example</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid blue;
      border-end-start-radius: 20px;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Border End Start Radius</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The border-end-start-radius property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. As always, ensure you test your site in multiple browsers to confirm the appearance is consistent across them.

🎉 Conclusion

The border-end-start-radius property is a useful tool for developers who want to apply rounded corners to specific sides of an element, especially when working with different writing modes.

By utilizing this property, you can create more visually interesting designs that adapt to the content's direction and layout.