CSS border-inline-style Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-style property in CSS is used to set the style of the borders along the inline (left and right) edges of an element.

This property is particularly useful in writing modes where the inline direction may be different from the traditional left-to-right flow, such as in vertical writing modes. It provides a way to define the style of borders on these inline edges in a way that adapts to different writing modes.

💡 Syntax

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

Syntax

Copied

element {
  border-inline-style: style;
}

Here, style can be any valid CSS border style value, such as solid, dotted, dashed, etc.

🎛️ Default Value

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

🏠 Property Values

Value	Description
none	No border is drawn.
solid	A solid line border.
dotted	A border made up of dots.
dashed	A border made up of dashes.
double	A double line border.
groove	A border that appears carved into the page.
ridge	A border that appears to stick out from the page.
inset	A border that makes the element appear embedded.
outset	A border that makes the element appear as though it is coming out of the page.

📄 Example

In this example, we'll apply different border styles to the inline edges 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-style Example</title>
  <style>
    div {
      border-inline-style: solid;
      border-inline-width: 4px;
      border-inline-color: blue;
    }
  </style>
</head>
<body>
  <h1>Div with Inline Border Style</h1>
  <div>This div has a solid blue border on the inline edges.</div>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-style property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it's always a good idea to test your website across different browsers to ensure consistent appearance and functionality.

🎉 Conclusion

The border-inline-style property provides a flexible way to style the borders of elements along the inline edges, making it especially useful in multilingual websites or layouts that need to adapt to different writing modes. By utilizing this property, you can create visually appealing designs that work well across different text directions and styles.