CSS border-inline-start Property

Posted in CSS Tutorial

Updated on Aug 10, 2024

By Mari Selvan

👁️ 7 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-start property in CSS is a logical property that allows developers to set the width, style, and color of the border on the inline-start side of an element. This side corresponds to the left side in left-to-right (LTR) writing modes and to the right side in right-to-left (RTL) writing modes. The logical properties make it easier to create layouts that adapt to different writing modes and text directions.

💡 Syntax

The syntax for the border-inline-start property is straightforward and allows you to specify the width, style, and color of the border.

Syntax

Copied

element {
  border-inline-start: width style color;
}

Here, width can be a length value (e.g., 2px), style can be a border style (e.g., solid), and color can be any valid CSS color value.

🎛️ Default Value

The default value of the border-inline-start property is as follows:

Syntax

Copied

element{
  border-inline-start: medium none currentcolor;
}

This means that by default, no border is applied (none), the width is set to medium, and the color is the current text color of the element.

🏠 Property Values

Value	Description
width	Specifies the thickness of the border, such as medium, thin, thick, or a specific length like 2px.
style	Defines the style of the border, such as none, solid, dashed, dotted, double, etc.
color	Specifies the color of the border, which can be a named color, a hexadecimal value, an RGB value, an HSL value, or currentcolor.

📄 Example

In this example, we'll add a solid red border to the inline-start side of a paragraph element.

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-inline-start Example</title>
  <style>
    p {
      border-inline-start: 4px solid red;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Inline-Start Border</h1>
  <p>This paragraph has a solid red border on the inline-start side.</p>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-start 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-inline-start property is a useful tool for developers who need to manage borders in a way that respects different writing modes and text directions. By using this logical property, you can create layouts that are more adaptable and accessible. Experiment with different widths, styles, and colors to see how this property can enhance your web designs.