CSS border-inline-width Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 7 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-width property in CSS is used to set the width of the inline borders of an element. Inline borders refer to the borders on the start and end sides of an element, which correspond to the left and right sides in left-to-right (LTR) writing modes, and the right and left sides in right-to-left (RTL) writing modes.

This property allows for more precise control of border styling in multi-directional text layouts.

💡 Syntax

The syntax for the border-inline-width property can be as follows:

Syntax

Copied

element {
  border-inline-width: value;
}

Here, value can be a single width value that applies to both inline borders, or two width values where the first value applies to the start border and the second to the end border.

🎛️ Default Value

The default value of the border-inline-width property is medium, which is a predefined CSS keyword representing a medium border width. The actual pixel value of medium can vary between browsers but is typically around 3 to 4 pixels.

🏠 Property Values

Value	Description
length	A specific width value, such as 2px, 0.5em, 1rem, etc.
thin	A predefined keyword for a thin border width, typically around 1px.
medium	A predefined keyword for a medium border width, typically around 3px.
thick	A predefined keyword for a thick border width, typically around 5px.

📄 Example

In this example, we'll set the inline border width of a box element to 5 pixels on both sides.

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-width Example</title>
  <style>
    .box {
      border-inline-width: 5px;
      border-inline-style: solid;
      border-inline-color: black;
    }
  </style>
</head>
<body>
  <h1>Box with Custom Inline Border Width</h1>
  <div class="box">
    This is a box with 5px inline borders.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-width property is well-supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it's recommended to test this property across different browsers and devices to ensure consistent rendering.

🎉 Conclusion

The border-inline-width property provides a flexible way to control the inline borders of an element, which is particularly useful in multi-language websites with different text directions. By customizing the inline border width, you can create visually distinct and responsive designs that adapt to various writing modes and layouts.