Signup/Sign In
PUBLISHED ON: APRIL 15, 2021

CSS border-inline-start-width property

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

The properties related to the border-inline-start-width property are the border-block-start-width, border-block-end-width, and border-inline-end-width properties, which determine the other border widths of the element.

Syntax for the border-inline-start-width property

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

border-inline-start-width: border-width;

Example: CSS border-inline-start-width property

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

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline-start-width property in CSS</title>
	<style type="text/css">
		div {
		  background-color: red;
		  width: 120px;
		  height: 120px;
		}
		
		.exampleText {
		  writing-mode: horizontal-tb;
		  border: 5px solid blue;
		  border-inline-start-width: thick;
		}
	</style>
</head>
<div>
	<p class="exampleText">Study Tonight</p>
</div>

</html>

Output:

Example: CSS border-inline-start-width property

Here in the example below, we are using the border-inline-start-width property with different border width, styles, colors, and their different values. In this case, we have given the border-inline-start-width value as 4 px. This means that there will be an inline start border having a width of 5 px.

<!DOCTYPE html>
<html>

<head>
	<title>Border-inline-start-width property in CSS</title>
	<style type="text/css">
		div {
		  background-color: pink;
		  width: 150px;
		  height: 150px;
		}
		
		.exampleText {
		  border-inline-start-width: 4px;
		writing-mode: horizontal-tb;
		direction: rtl;
		}
	</style>
</head>
<div>
	<p class="exampleText">Study Tonight</p>
</div>

</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-width property is medium. This property is applicable to all elements. It is not an inherited property. Percentages refer to the logical width of the containing block. The computed value for this property is the absolute length or zero in case if the border style is none or hidden. The animation type for this property is a length.



About the author:
I like to write content about technology, helping users to understand technical terms easily. I also write about Python, Java, and various other programming language. I have an experience of 3+ years in content creation.