CSS border-inline-start-style property

The border-inline-start-style property in CSS refers to the style of the logical inline start border of a specific element, which gets mapped to a physical border style on the basis of the writing mode, text orientation, and directionality of the element.

The properties that are related to this property are border-inline-start-style, border-block-start-style, and border-block-end-style which determine the other border styles of the element.

Syntax for border-inline-start-style property:

Following is the syntax for the border-inline-start-style property.

border-inline-start-style: border-style;

Example: CSS border-inline-start-style property

Here in the example below, we are using the border-inline-start-style property with different border styles, colors, and their different values. In this case, we have given the border-inline-start-style value as dashed, which means the border line will be designed across the inline-start border in a dashed fashion.

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline-start-style property in CSS</title>
	<style type="text/css">
		div {
		  background-color: green;
		  width: 130px;
		  height: 130px;
		}
		
		.exampleText {
		  writing-mode: vertical-lr;
		  border: 5px solid blue;
		  border-inline-start-style: dashed;
		}
	</style>
</head>

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

</html>

Output:

Example 2: CSS border-inline-start-style property

Here in the example below, we are using the border-inline-start-style property with different border styles, colors, and their different values. In this case, we have given the border-inline-start-style value as groove.

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline-start-style property in CSS</title>
	<style type="text/css">
		div {
		  background-color: green;
		  width: 130px;
		  height: 130px;
		}
		
		.exampleText {
		  writing-mode: horizontal-tb;
		  border: 5px solid red;
		  border-inline-start-style: groove;
		}
	</style>
</head>

<body>
	<div>
		<p class="exampleText">Study Tonight is the best platform for learning 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-start-style property in CSS is none. This property is applicable to all elements. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.