CSS border-start-start-radius Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-start-start-radius property in CSS is used to define the radius of the starting corner of the border on the inline start side, which corresponds to the top-left corner in left-to-right writing modes and the top-right corner in right-to-left writing modes.

This property allows for more control over the appearance of rounded corners in elements that need to adapt to different writing modes or directions.

💡 Syntax

The syntax for the border-start-start-radius property is straightforward. It can accept either one or two values:

Syntax

Copied

element {
  border-start-start-radius: length | percentage [ length | percentage ];
}

🎛️ Default Value

The default value of the border-start-start-radius property is 0, meaning there is no rounded corner by default.

🏠 Property Values

Value	Description
length	Specifies the radius in fixed units like px, em, etc.
percentage	Specifies the radius as a percentage of the border box's width or height.
initial	Sets the property to its default value (0).
inherit	Inherits the value from the parent element.

📄 Example

In this example, we'll apply the border-start-start-radius property to create a rounded corner on the top-left side of a div in a left-to-right writing mode.

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-start-radius Example</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightcoral;
      border: 2px solid #333;
      border-start-start-radius: 20px;
    }
  </style>
</head>
<body>
  <h1>Box with Custom border-start-start-radius</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The border-start-start-radius property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The border-start-start-radius property is a useful tool for creating visually appealing elements that need to adapt to different writing modes. By customizing the corner radius, you can enhance the design and flexibility of your web components. Experiment with different values to see how this property can contribute to a more dynamic and responsive layout.