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.
