CSS border-inline-color Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

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

This property is part of the logical properties in CSS, which means it adapts to the writing mode, text direction, and orientation of the content. This is particularly useful for creating layouts that need to be flexible and accommodate different languages and writing systems.

💡 Syntax

The syntax for the border-inline-color property allows you to specify one or two colors. If two colors are provided, the first color applies to the start edge, and the second to the end edge. If only one color is provided, it applies to both edges.

Syntax

Copied

element {
  border-inline-color: color;
}

element {
  border-inline-color: start-color end-color;
}

Here, color, start-color, and end-color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the border-inline-color property is the current color of the element’s color property. If not explicitly set, it inherits the border color from the element's border-color property.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
inherit	Inherits the color from its parent element.
transparent	Makes the border color fully transparent.

📄 Example

In this example, we'll set the inline border color of a div element to green on the start edge and blue on the end edge.

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-color Example</title>
  <style>
    div {
      border-inline-width: 4px;
      border-inline-style: solid;
      border-inline-color: green blue;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Inline Border Colors</h1>
  <div>
    This div has a green border on the start side and a blue border on the end side.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-color property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it is always advisable to test your website across different browsers to ensure compatibility, especially if you are targeting a diverse audience.

🎉 Conclusion

The border-inline-color property is a versatile tool for web developers looking to create adaptable and visually appealing designs. By controlling the colors of the inline borders, you can ensure that your layout responds well to different writing modes and text directions. Experiment with different color combinations to enhance the design and readability of your web projects.