CSS border-inline property

The border-inline property in CSS is a shorthand property that sets the individual logical inline border at a single place to the element.

The physical borders to which border-inline gets mapped depending on the writing mode, directionality, and text orientation of the element.

It corresponds to the border-bottom and border-top or border-left and border-right properties, based on the values which are defined for direction, text-orientation, and writing-mode.

Syntax for border-inline property

Following is the syntax for the border-inline property.

border-inline-style: style;

Example: CSS border-inline property

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

<!DOCTYPE html>
<html>
<head>
	<title>Border-inline property in CSS</title>
	<style type="text/css">
		div {
		  background-color: pink;
		  width: 150px;
		  height: 150px;
		}
		
		.exampleText {
		  writing-mode: vertical-rl;
		  border-inline: 2px dashed purple;
		}
	</style>
</head>

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

</html>

Output:

Example: CSS border-inline property

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

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline property in CSS</title>
	<style type="text/css">
		div {
		  background-color: pink;
		  width: 150px;
		  height: 150px;
		}
		
		.exampleText {
		  writing-mode: horizontal-tb;
		  border-inline: 6px dotted;
		}
	</style>
</head>

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

</html>

Output:

Browser Compatibility

There are many browsers which 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 49 49
IOS Safari no no
Samsung Internet no no

Conclusion

The initial value for the border-inline property in CSS is different for each of the properties of the shorthand. This property is applicable to all elements. It is not an inherited property. The computed value for this property is specified as each of the properties of the shorthand. The animation type for this property is discrete.