LAST UPDATED: JUNE 4, 2021
CSS border-block-end-color Property
CSS border-block-end-color property is used to set the color of the block-end border of an element, which is mapped to a physical border-color based on the writing mode, text orientation, and directionality of the element. Let's see the examples.
Syntax for border-block-end-color Property
Following is the syntax for the border-block-end-color property.
border-block-end-color: border-color;
Example: CSS border-block-end-color Property
Here in the example below, we are using the border-block-end-color property with different border colors, designs, and different values. In this case, we have given the border-block-end-color as red.
<!DOCTYPE html>
<html>
<head>
<title>Border-block-end-color property</title>
<style type="text/css">
div {
background-color: pink;
width: 150px;
height: 150px;
}
.exampleText {
writing-mode: vertical-rl;
border: 10px solid blue;
border-block-end-color: red;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Digital learning simplified at Study Tonight!</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-block-end-color Property
Here in the example below, we are using the border-block-end-color property with different border colors, designs, and different values. In this case, we have given the border-block-end-color as rgb.
<!DOCTYPE html>
<html>
<head>
<title>Border-block-end-color property</title>
<style type="text/css">
div {
background-color: skyblue;
width: 150px;
height: 150px;
}
.exampleText {
writing-mode: horizontal-tb;
border: 10px solid blue;
border-block-end-color: rgb(150, 70, 210, -7);
}
</style>
</head>
<body>
<div>
<p class="exampleText">Digital learning simplified at 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
The initial value for the border-block-end-color property is currentcolor. This property is applicable to all elements. It is not an inherited property. The computed value for the border-block-end-color property is the computed color. The animation type of the border-block-end-color property is a color.
