Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS border-inline-color property

The border-inline-color property in CSS asserts the color of the logical inline borders of an element, which gets mapped to a physical border color of the element.

It refers to the border-bottom-color and border-top-color or border-left-color and border-right-color property on the basis of the values which are defined for the direction, text-orientation, and the writing-mode.

The border color for the other dimensions may be set with border-block-color that sets border-block-start-color and border-block-end-color.

Syntax for border-inline-color property:

Following is the syntax for the border-inline-color property.

border-inline-color: color;

Example: CSS border-inline-color property

Here in the example below, we are using the border-inline-color property with different border styles, colors, and different values. In this case, we have given the border-inline-color value as red. This means that there will be an inline border with a red color.

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline-color property in CSS</title>
	<style type="text/css">
		div {
		  background-color: pink;
		  width: 140px;
		  height: 140px;
		}
		
		.exampleText {
		  writing-mode: vertical-rl;
		  border: 10px solid blue;
		  border-inline-color: red;
		}
	</style>
</head>

<body>
	<div>
		<p class="exampleText">Study Tonigjht is the best platform to learn digital courses in a simplified way !</p>
	</div>
</body>

</html>

Output:

Example 2: CSS border-inline-color property

Here in the example below, we are using the border-inline-color property with different border styles, colors, and their different values. In this case, we have given the border-inline-color value using the hexadecimal value as '#f8cf8f'. This means that there will be an inline border with a different color.

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline-color property in CSS</title>
	<style type="text/css">
		div {
		  background-color: pink;
		  width: 140px;
		  height: 140px;
		}
		
		.exampleText {
		  writing-mode: horizontal-tb;
		  border: 10px solid blue;
		  border-inline-color: #f8cf8f;
		}
	</style>
</head>

<body>
	<div>
		<p class="exampleText">Study Tonigjht 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 87 87
Edge 79 79
Firefox 66 66
Internet Explorer no no
Opera 73 73
Safari no no
Webview Android 87 87
Chrome Android 87 87
Firefox Android 66 66
Opera Android 48 48
IOS Safari no no
Samsung Internet no no

Conclusion

The initial value for the border-inline-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 discrete.