CSS border-inline-end-width Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-end-width property in CSS is used to specify the width of the border on the inline end side of an element. The inline end side refers to the side that corresponds to the end of the text direction in an element’s writing mode.

This property is part of the CSS Logical Properties and Values module, which allows for more flexible layouts that adapt to different writing modes, such as left-to-right (LTR) or right-to-left (RTL) text.

💡 Syntax

The syntax for the border-inline-end-width property is straightforward. It can accept various values that define the width of the border.

Syntax

Copied

element {
  border-inline-end-width: value;
}

🎛️ Default Value

The default value for border-inline-end-width is medium, which is typically interpreted by the browser as a value of 3px.

🏠 Property Values

Value	Description
thin	Sets the border width to a thin value, typically 1px.
medium	Sets the border width to a medium value, typically 3px. This is the default value.
thick	Sets the border width to a thick value, typically 5px.
length	A specific length value, such as 2px, 0.5em, etc.
initial	Sets the property to its default value (medium).
inherit	Inherits the property value from its parent element.

📄 Example

In this example, we'll set the border-inline-end-width to 5px on 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-end-width Example</title>
  <style>
    p {
      border-inline-end-width: 5px;
      border-inline-end-style: solid;
      border-inline-end-color: black;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Inline-End Border Width</h1>
  <p>
    This paragraph has a border width of 5px on the inline-end side. This property is particularly useful when designing layouts that need to adapt to different writing modes.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-end-width property is supported in most modern browsers. This includes Chrome, Firefox, Safari, Edge, and Opera. However, as with any CSS property, it is advisable to test your layout across different browsers to ensure consistent behavior.

🎉 Conclusion

The border-inline-end-width property is a valuable tool in responsive web design, especially for websites that need to support multiple writing modes. By specifying the border width on the inline end side, you can create layouts that are both flexible and visually appealing. Experiment with different values to see how this property can enhance the design of your web pages.