![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-inline-end-color Property
![CSS border-inline-end-color Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-inline-end-color.webp)
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.
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS border-inline-end-color Property), please comment here. I will help you immediately.