Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS border-block-color Property

CSS border-block-color property is used to define the color of the logical block borders that gets mapped to a physical border color based on the writing mode, text orientation, and the directionality of the element.

Syntax for border-block-color Property

Following is the syntax for the border-block-color property.

border-block-color: color;

Example: CSS border-block-color Property

Here in the example below, we are using the border-block-color property with different background colors, borders, and different values. In this case, we have given the border-block-color as black. The CSS styling is done inside the opening and closing head tags of the HTML.

<!DOCTYPE html>
<head>
	<title>Border-block-color property in CSS</title>
	<style type="text/css">
		div {
		  background-color: pink;
		  width: 120px;
		  height: 120px;
		}
		
		.exampleText {
		  writing-mode: horizontal-tb;
		  border: 10px solid red;
		  border-block-color: black;
		}
	</style>
</head>
<body>
	<div>
		<p class="exampleText">Welcome to Study Tonight</p>
	</div>
</body>
</html>

Output:

Example 2: CSS border-block-color Property

Here in the example below, we are using the border-block-color property with different background colors, borders, and different values. In this case, we have given the border-block-color as #F5F6F7.

<!DOCTYPE html>
<head>
	<title>Border-block-color property in CSS</title>
	<style type="text/css">
		div {
		  background-color: skyblue;
		  width: 120px;
		  height: 120px;
		}
		.exampleText {
		  writing-mode: vertical-lr;
		  border: 10px solid red;
		  border-block-color: #F5F6F7;
		}
	</style>
</head>
<body>
	<div>
		<p class="exampleText">Welcome to 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 the 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-color property is currentcolor. This property is applicable to all elements. It is not an inherited property. The computed value for the border-block-color property is the computed color itself.