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.
