CSS border-block-end Property
CSS border-block-end property in CSS is a shorthand property that is used to set the individual logical border values.
The physical border at which it is mapped is based on the writing mode, directionality, and text orientation of the element. It refers to the border-right, border-top, border-bottom, or border-left property.
Syntax for border-block-end property:
Following is the syntax for the border-block-end property.
border-block-end: border-color;
Example: CSS border-block-end Property
In the example below, we are using the border-block-end property with different background colors, borders, and different values. In this case, we have given the border-block-end as 6px dashed purple. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<head>
<title>Border-block-end property</title>
<style type="text/css">
div {
background-color: skyblue;
width: 140px;
height: 140px;
}
.exampleText {
writing-mode: horizontal-tb;
border-block-end: 6px dashed purple;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-block-end Property
Here in the example below, we are using the border-block-end property with different background colors, borders, and different values. In this case, we have given the border-block-end as 2px dotted black.
<!DOCTYPE html>
<head>
<title>Border-block-end property</title>
<style type="text/css">
div {
background-color: pink;
width: 140px;
height: 140px;
}
.exampleText {
writing-mode: vertical-lr;
border-block-end: 2px dotted black;
}
</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 |
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
This property is applicable to all elements. It is not an inherited property. The computed value for border-top-style is the as specified one. The computed value for border-top-width is the absolute length or zero in case it is none or hidden. And the computed value for the border-top-color is the computed color.
