LAST UPDATED: JUNE 7, 2021
CSS border-block-end-width Property
CSS border-block-end-width property is used to set the width of the logical block-end border of the element. It gets mapped to a physical border width on the basis of the directionality, writing mode, and text orientation of the element.
Syntax for border-block-end-width property:
Following is the syntax for the border-block-end-width property.
border-block-end-width: border-width;
Example: CSS border-block-end-width Property
Here in the example below, we are using the border-block-end-width property with different border styles, widths, colors, and different values. In this case, we have given the border-block-end-width as 5px.
<!DOCTYPE html>
<html>
<head>
<title>Border-block-end-width property</title>
<style type="text/css">
div {
background-color: red;
width: 140px;
height: 140px;
}
.exampleText {
writing-mode: vertical-rl;
border: 1px solid black;
border-block-width: 5px;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-block-end-width Property
Here in the example below, we are using the border-block-end-width property with different border styles, widths, colors, and different values. In this case, we have given the border-block-end-width as thick.
<!DOCTYPE html>
<html>
<head>
<title>Border-block-end-width property</title>
<style type="text/css">
div {
background-color: skyblue;
width: 140px;
height: 140px;
}
.exampleText {
writing-mode: horizontal-tb;
border: 3px solid red;
border-block-width: thick;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight</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 |
no |
no |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the border-block-end-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 animation type of this property is discrete.
