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.