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.
