CSS border-inline-end Property

Posted in CSS Tutorial

Updated on Aug 10, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-end property in CSS is part of the Logical Properties and Values module. It allows you to define the border on the end side of an element's inline dimension, which adapts depending on the text direction (left-to-right or right-to-left).

This property is useful for creating layouts that are responsive to different writing modes, such as languages that use right-to-left text.

💡 Syntax

The syntax for the border-inline-end property is similar to other border properties. It allows you to set the width, style, and color of the border on the inline-end side of an element.

Syntax

Copied

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

🎛️ Default Value

The default value of the border-inline-end property is medium none currentcolor. This means that by default, the border is not visible unless explicitly defined.

🏠 Property Values

Value	Description
width	Specifies the thickness of the border. Can be set using units like px, em, rem, or keywords like thin, medium, and thick.
style	Defines the style of the border, such as solid, dashed, dotted, double, etc.
color	Sets the color of the border. Can be defined using named colors, hexadecimal values, RGB values, HSL values, or currentcolor.

📄 Example

In this example, we'll add a solid, red border to the inline-end side of a div 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 Example</title>
  <style>
    div {
      border-inline-end: 4px solid red;
    }
  </style>
</head>
<body>
  <h1>Div with border-inline-end</h1>
  <div>This div has a red border on the inline-end side.</div>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-end property is supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is a good practice to test your website across different browsers to ensure full compatibility.

🎉 Conclusion

The border-inline-end property is a versatile tool for creating borders that adapt to different text directions and writing modes. It is particularly useful for websites that need to support multiple languages or layouts that change based on the writing mode. By using logical properties like border-inline-end, you can ensure your designs are more flexible and responsive.