CSS border-inline-start-width Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-start-width property in CSS is used to set the width of the border on the inline start side of an element.

This property is part of the CSS Logical Properties and Values specification, which allows you to control layout in a way that is writing-mode-aware. This means that instead of relying on physical directions (like left or right), you can use logical directions that adapt to the text direction of the document (left-to-right or right-to-left).

💡 Syntax

The syntax for the border-inline-start-width property is simple. You can apply it to any element that supports borders.

Syntax

Copied

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

Here, width can be a length value (e.g., 2px, 0.5em), a keyword (thin, medium, thick), or the global value inherit, initial, unset, or revert.

🎛️ Default Value

The default value of the border-inline-start-width property is medium. This corresponds to a width that is browser-dependent but typically around 3-4 pixels.

🏠 Property Values

Value	Description
length	Specifies the width of the border using any valid CSS length unit (e.g., px, em, rem).
thin	A keyword that sets the border width to a thin size (usually around 1px).
medium	A keyword that sets the border width to a medium size (the default, typically around 3-4px).
thick	A keyword that sets the border width to a thick size (usually around 5-6px).
inherit	Inherits the `border-inline-start-width` from its parent element.
initial	Sets the property to its default value (medium).
unset	Resets the property to either inherit or initial, depending on whether it is inherited or not.
revert	Reverts the property to the value it would have had according to the cascade.

📄 Example

In this example, we'll set the border-inline-start-width to 5px for 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-width Example</title>
  <style>
    p {
      border-inline-start-width: 5px;
      border-inline-start-style: solid;
      border-inline-start-color: #ff5733;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Border Inline Start Width</h1>
  <p>This paragraph has a 5px wide border on the inline start side, which adjusts based on the writing mode of the document.</p>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-start-width property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It's always recommended to test your website across different browsers to ensure consistent behavior.

🎉 Conclusion

The border-inline-start-width property is a useful tool for controlling the width of borders on the inline start side of an element. It is particularly powerful when working with documents in different writing modes, as it adapts based on the text direction.

By using this property, you can create more flexible and writing-mode-aware designs. Experiment with different border widths and see how this property can enhance the layout and visual structure of your web projects.