CSS border-block Property

CSS border-block property is a shorthand property that is used to set the individual logical block border property values at a single place.

The border-block property may be used for setting the values for one or more border-block-style, border-block-width, and border-block-color properties for both the start as well as the end of the block dimension.

Syntax for border-block property:

Following is the syntax for the border-block property.

border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

Example: CSS border-block Property

Here in the example below, we are using the border-block property with different background colors, borders, and different values. In this case, we have given the border-block as dashed i.e; the borderline will be in a dashed fashion.

<!DOCTYPE html>
<html>
<head>
	<title>Border-block property</title>
	<style type="text/css">
		div {
	  background-color: red;
	  width: 150px;
	  height: 150px;
	}	
	.exampleText {
	  writing-mode: vertical-rl;
	  border-block: 6px dashed black;
	}
	</style>
</head>
<body>
	<div>
		<p class="exampleText">Let Us Learn With Study Tonight</p>
	</div>
</body>
</html>

Output:

Example 2: CSS border-block Property

Here in the example below, we are using the border-block property with different background colors, borders, and different values. In this case, we have given the border-block as dotted i.e; the borderline will be in a dotted fashion.

<!DOCTYPE html>
<html>
<head>
	<title>Border-block property</title>
	<style type="text/css">
		div {
	  background-color: pink;
	  width: 150px;
	  height: 150px;
	}	
	.exampleText {
	  writing-mode: horizontal-tb;
	  border-block: 2px dotted purple;
	}
	</style>
</head>
<body>
	<div>
		<p class="exampleText">Let Us Learn With Study Tonight</p>
	</div>
</body>
</html>

Output:

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

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 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

48

48

IOS Safari

no

no

Samsung Internet

no

no

Conclusion

This property is applicable to all elements. It is not an inherited property. The computed value for the border-top-width is the absolute length or 0 if it is none or hidden.