CSS border-inline Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline property in CSS is a shorthand property that allows you to define the border for the logical inline start and inline end of an element.

This property is particularly useful in multi-directional layouts, as it adapts based on the writing mode, text direction, and other layout-related settings of the element.

Unlike traditional border-left and border-right properties, border-inline ensures that your styles are correctly applied regardless of the writing direction.

💡 Syntax

The syntax for the border-inline property is as follows:

Syntax

Copied

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

You can specify one, two, or three values:

One value applies to both inline start and inline end.
Two values apply the first value to the inline start and the second to the inline end.

🎛️ Default Value

The default value of the border-inline property is medium none currentcolor, meaning no border will be visible unless explicitly defined.

🏠 Property Values

Value	Description
border-width	Specifies the thickness of the border (e.g., thin, medium, thick, or a specific size like 2px).
border-style	Defines the style of the border (e.g., solid, dashed, dotted, double).
border-color	Sets the color of the border. This can be any valid CSS color value (e.g., red, #ff5733, rgb(255, 87, 51)).

📄 Example

In this example, we'll apply a solid blue border of 2px thickness to both the inline start and inline end of a paragraph.

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 Example</title>
  <style>
    p {
      border-inline: 2px solid blue;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Inline Borders</h1>
  <p>This paragraph has a 2px solid blue border on both the inline start and inline end sides.</p>
</body>
</html>

🖥️ Browser Compatibility

The border-inline property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is designed to work well in both left-to-right (LTR) and right-to-left (RTL) writing modes, ensuring consistent styling across different languages and layouts.

🎉 Conclusion

The border-inline property is a versatile tool for applying borders in multi-directional layouts. By using logical properties like border-inline, you can create responsive designs that adapt to different text directions and writing modes. This makes your CSS more robust and easier to maintain, especially in internationalized websites. Experiment with this property to see how it can enhance the visual design and usability of your web projects.