CSS border-inline-end-style Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-end-style property in CSS is part of the logical properties module, which allows you to control the style of the border on the inline-end side of an element. The inline-end side refers to the end of the line in the writing mode's inline direction, making this property particularly useful in multi-directional layouts or when dealing with right-to-left (RTL) text.

💡 Syntax

The syntax for the border-inline-end-style property is simple and similar to other border style properties.

Syntax

Copied

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

Here, style can be any of the standard border styles such as solid, dashed, dotted, etc.

🎛️ Default Value

The default value of the border-inline-end-style property is none, meaning no border is applied unless specified.

🏠 Property Values

Value	Description
none	No border.
solid	A single solid line.
dashed	A series of square-ended dashes.
dotted	A series of round dots.
double	Two parallel solid lines.
groove	A 3D grooved border.
ridge	A 3D ridged border.
inset	A border that makes the element appear embedded.
outset	A border that makes the element appear raised.

📄 Example

In this example, we'll apply a dashed border style to the inline-end 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-end-style Example</title>
  <style>
    p {
      border-inline-end-style: dashed;
      border-inline-end-width: 2px;
      border-inline-end-color: black;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Dashed Inline-End Border</h1>
  <p>This paragraph has a dashed border on the inline-end side.</p>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-end-style property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Since browser support can vary, especially in older browsers, it's a good practice to test your design across different browsers to ensure consistent rendering.

🎉 Conclusion

The border-inline-end-style property is a useful tool for developers working with multi-directional layouts or RTL text. By controlling the style of the border on the inline-end side, you can create designs that are more adaptable to different writing modes and languages. Experiment with different border styles to see how this property can enhance the visual appeal of your web projects.