LAST UPDATED: JUNE 7, 2021
CSS border-block-end-style Property
CSS border-block-end-style property is used to set the style of the logical block-end border of the element in HTML. It gets mapped to a physical border-style based on the writing mode, text orientation, and directionality of the element.
Syntax for border-block-end-style Property
Following is the syntax for the border-block-end-style property.
border-block-end-style: border-style;
Example: CSS border-block-end-style Property
Here in the example below, we are using the border-block-end-style property with different border styles, colors, and different values. In this case, we have given the border-block-end-style as 'dashed'.
<!DOCTYPE html>
<html>
<head>
<title>Border-block-end-style property in CSS</title>
<style type="text/css">
div {
background-color: red;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
border: 5px purple;
border-block-end-style: dashed;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Welcome To Study Tonight !</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-block-end-style Property
Here in the example below, we are using the border-block-end-style property with different border styles, colors, and different values. In this case, we have given the border-block-end-style as 'groove'.
<!DOCTYPE html>
<html>
<head>
<title>Border-block-end-style property in CSS</title>
<style type="text/css">
div {
background-color: pink;
width: 100px;
height: 100px;
}
.exampleText {
writing-mode: horizontal-tb;
border: 8px purple;
border-block-end-style: groove;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Welcome To 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-block-end-style property is none. This property is applicable to all elements. It is not an inherited property. The computed value for this property is as specified. The animation type of this property is discrete.
