CSS border-start-end-radius Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-start-end-radius property in CSS is a logical property that allows you to control the rounding of the corner on the start side of the block's end edge.

This property is part of the broader family of CSS logical properties that adapt to the writing mode of the document, making it more versatile for different languages and layouts.

💡 Syntax

The syntax for the border-start-end-radius property is similar to other border-radius properties. You can define the radius using length values, percentages, or a combination of both.

Syntax

Copied

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

radius: This can be a length (e.g., px, em, rem) or a percentage, defining the curvature of the corner.

🎛️ Default Value

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

🏠 Property Values

Value	Description
length	A specific length value (e.g., 10px, 1em) that defines the radius of the corner.
percentage	A percentage value that defines the radius relative to the width or height of the element.

📄 Example

In this example, we'll apply the border-start-end-radius property to a box with a set radius.

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-start-end-radius Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      border: 2px solid blue;
      border-start-end-radius: 50px;
    }
  </style>
</head>
<body>
  <h1>Box with Custom Start-End Border Radius</h1>
  <div class="box"></div>
</body>
</html>

In this example, the top-right corner of the box will have a radius of 50px, creating a rounded effect.

🖥️ Browser Compatibility

The border-start-end-radius property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. As with any CSS property, it's recommended to test your design across different browsers to ensure compatibility.

🎉 Conclusion

The border-start-end-radius property is a useful tool when you want to apply a rounded corner to the start side of an element's end edge, especially in a layout that adapts to different writing modes. It simplifies the process of creating responsive and adaptive designs that look great in any language or layout. Try experimenting with different radius values to see how this property can enhance the visual appeal of your web projects.