CSS border-inline-end property
The border-inline-end property in CSS is a shorthand property to set the individual logical inline-end border at a single place in the element.
The physical border to which the border-inline-end gets mapped is based on the directionality, writing mode, and text orientation of the element. It refers to the border-right, border-top, border-bottom, or border-left property on the basis of the values which are defined for direction, text-orientation, and writing-mode.
Syntax for border-inline-end property:
Following is the syntax for the border-inline-end property.
border-inline-end: border-width|border-style|border-color;
CSS border-inline-end property values:
Let's see what values this property can have and what do those values do:
| Value |
Description |
| border-width |
This value refers to the width of the border. |
| border-style |
This value refers to the line style of the border. |
| color |
This value refers to the color of the border. |
Example 1: CSS border-inline-end property
Here in the example below, we are using the border-inline-end property with different border styles, colors, and different values. In this case, we have given the border-inline-end value as 5px dashed black. This means that there will be an inline end border with black color in a dashed fashion.
<!DOCTYPE html>
<html>
<head>
<title>Border-inline-end property in CSS</title>
<style type="text/css">
div {
background-color: purple;
width: 130px;
height: 130px;
}
.exampleText {
writing-mode: horizontal-tb;
border-inline-end: 5px dashed black;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight is the best platform to learn digital courses in a simplified way !</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-inline-end property
Here in the example below, we are using the border-inline-end property with different border styles, colors, and different values. In this case, we have given the border-inline-end value as 10px. This means that there will be an inline end border without any color and without any style too.
<!DOCTYPE html>
<html>
<head>
<title>Border-inline-end property in CSS</title>
<style type="text/css">
div {
background-color: purple;
width: 130px;
height: 130px;
}
.exampleText {
writing-mode: horizontal-tb;
border-inline-end: 10px;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight is the best platform to learn 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-end property is different as each of the properties of the shorthand. The initial value for all the properties of the border-style property is none. The initial value for the color property varies from one browser to another. This property is applicable to all elements. It is not an inherited property. The computed value for all the properties of the border-width property is the absolute length or zero. The animation type for this property is discrete.
