CSS border-inline-end-color property
The border-inline-end-color property in CSS refers to the color of the logical inline-end border of an element, which gets mapped to a physical border color on the basis of the directionality, text orientation, and writing mode of the element.
It refers to the border-right-color, border-top-color, border-bottom-color, or the border-left-color property based on the values which are defined for text-orientation, direction, and writing-mode. The related properties for this property are- border-b; lock-end-color, border-block-start-color, and border-inline-start-color properties, which define other border colors of the element.
Syntax for border-inline-end-color property
Following is the syntax for the border-inline-end-color property.
border-inline-end-color: border-color;
Example: CSS border-inline-end-color property
Here in the example below, we are using the border-inline-end-color property with different border styles, colors, and different values. In this case, we have given the border-inline-end-color value as red. This means that there will be an inline end border in red color without any style.
<!DOCTYPE html>
<html>
<head>
<title>Border-inline-end-color property in CSS</title>
<style type="text/css">
div {
background-color: skyblue;
width: 130px;
height: 130px;
}
.exampleText {
writing-mode: vertical-rl;
border: 10px solid blue;
border-inline-end-color: red;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight is the best platform to learn digital courses in a simplified way !</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-inline-end-color property
Here in the example below, we are using the border-inline-end-color property with different border styles, colors, and their different values. In this case, we have given the border-inline-end-color value using the hexadecimal color value as #663399. This means that there will be an inline end border in #663399 color without any style.
<!DOCTYPE html>
<html>
<head>
<title>Border-inline-end-color property in CSS</title>
<style type="text/css">
div {
background-color: pink;
width: 130px;
height: 130px;
}
.exampleText {
writing-mode: vertical-rl;
border: 10px solid blue;
border-inline-end-color: #663399;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight is the best platform to learn digital courses in a simplified way !</p>
</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
69 |
69 |
| Edge |
79 |
79 |
| Firefox |
41 |
41 |
| Internet Explorer |
no |
no |
| Opera |
56 |
56 |
| Safari |
12.1 |
12.1 |
| Webview Android |
69 |
69 |
| Chrome Android |
69 |
69 |
| Firefox Android |
41 |
41 |
| Opera Android |
48 |
48 |
| IOS Safari |
12.2 |
12.2 |
| Samsung Internet |
10.0 |
10.0 |
Conclusion
The initial value for the border-inline-end-color property is currentcolor. This property is applicable to all elements. It is not an inherited property. The computed value for this property is the computed color. The animation type for this property is a color.
