CSS border-inline-end-color Property

Posted in CSS Tutorial

Updated on Aug 10, 2024

By Mari Selvan

👁️ 8 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-inline-end-color property in CSS allows you to set the color of the inline-end border of an element. The "inline-end" refers to the logical end of the inline dimension, which varies based on the writing mode, text direction, and other layout properties.

This property is part of the CSS Logical Properties and Values specification, which provides a way to control layout in a writing mode-independent manner.

💡 Syntax

The syntax for the border-inline-end-color property is simple and follows the standard CSS color value format.

Syntax

Copied

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

Here, 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-end-color property is currentcolor, which means it inherits the value of the color property of the element.

🏠 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%).
transparent	Makes the border color transparent.
currentcolor	Uses the current value of the element's color property.

📄 Example

In this example, we'll set the color of the inline-end border to green.

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-color Example</title>
  <style>
    .box {
      border: 2px solid;
      border-inline-end-color: green;
    }
  </style>
</head>
<body>
  <h1>Box with Custom Inline-End Border Color</h1>
  <div class="box">
    This box has an inline-end border color of green.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-inline-end-color property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is important to test your website across different browsers to ensure compatibility, especially if your site supports various writing modes and text directions.

🎉 Conclusion

The border-inline-end-color property is a useful tool for web developers aiming to create responsive designs that adapt to different writing modes and text directions.

By customizing the inline-end border color, you can enhance the visual appeal of your elements while ensuring consistency in various layouts. Experiment with this property to see how it can improve your web designs.