CSS border-inline-start property

The border-inline-start property in CSS is a shorthand property, which is identified to set the individual logical inline-start border property values at a single place in the style sheet.

The properties related to this property are- border-inline-end, border-block-start, and border-block-end, which define the other borders of the element.

Syntax for border-inline-start property:

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

border-inline-start: border-color;

CSS border-inline-start property values:

Let's see what values this property can have and what do those values do:

Value Description
border-width This value specifies the width of the border.
border-style This value specifies the line style of the border.
color This value specifies the color of the border.

Example: CSS border-inline-start property

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

<!DOCTYPE html>
<html>

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

<body>
	<div>
		<p class="exampleText">Study Tonight</p>
	</div>
</body>

</html>

Output:

Example 2: CSS border-inline-start property

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

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline-start property in CSS</title>
	<style type="text/css">
		div {
		  background-color: pink;
		  width: 120px;
		  height: 120px;
		}
		
		.exampleText {
		  writing-mode: vertical-rl;
		  border-inline-start: medium dotted green;
		}
	</style>
</head>

<body>
	<div>
		<p class="exampleText">Study Tonight</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 property in CSS is different as each of the properties of the shorthand. This property is applicable to all elements. It is not an inherited property. And for the border-inline-start-color, it is the computed color. The animation type for this property is a color.