”;
CSS border-block property is a shorthand property for assigning values to border-block-color, border-block-style and border-block-width in one go. The border-block-style is required parameter. If other parameters are not mentioned then default values will be used. This property depends on the direction of the block which is determined by the writing mode.
Syntax
border-block: border-block-width border-block-style border-block-color | initial | inherit;
Property Values
| Value | Description |
|---|---|
| It specifies the width of the border in the block direction. Default is medium. | |
| It specifies the style of the border in the block direction. Default is none. | |
| It specifies the color of the border in the block direction. Default is text”s color. | |
| initial | This sets the property to its default value. |
| inherit | This inherits the property from the parent element. |
Examples of CSS Border Block Property
The following examples explain the border-block property with different values.
Setting the Width of Border
To set the width of the border, we use the border-block-width component of the border-block property. In the following example, we have used ”thick” and 10px width for border-block-width property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#width1 {
padding: 30px;
border-block-style: solid;
border-block-width: thick;
}
#width2 {
padding: 30px;
border-block-style: solid;
border-block-width: 10px;
}
</style>
</head>
<body>
<h2>CSS border-block property</h2>
<p id="width1">
This first example shows the width property
of the border-block with thick value.
</p>
<p id="width2">
This second example shows the width property
of the border-block with 10px value.
</p>
</body>
</html>
Setting the Style of Border
To set the style of the border, we use the border-block-style component of the border-block property. In the following example, we have used ”solid” and ”dashed” styles for border-block-style property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#style1 {
padding: 30px;
border-block-style: solid;
}
#style2 {
padding: 30px;
border-block-style: dashed;
}
</style>
</head>
<body>
<h2>CSS border-block property</h2>
<p id="style1">
This first example shows the style property
of the border-block with solid value.
</p>
<p id="style2">
This second example shows the style property
of the border-block with dashed value.
</p>
</body>
</html>
Setting the Color of Border
To set the color of the border, we use the border-block-color component of the border-block property. In the following example, we have used ”red” and ”blue” colors for border-block-color property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#color1 {
padding: 30px;
border-block-style: solid;
border-block-color:red;
}
#color2 {
padding: 30px;
border-block-style: solid;
border-block-color:blue;
}
</style>
</head>
<body>
<h2>CSS border-block property</h2>
<p id="color1">
This first example shows the color property
of the border-block with red value.
</p>
<p id="color2">
This second example shows the color property
of the border-block with blue value.
</p>
</body>
</html>
Setting all Values at Once
To set the values of width, style and color at once, we can simply use the border-block property by providing all the values at once. In the following example, the width has been taken as 5px, style as dashed and color as green.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#block {
padding: 30px;
border-block: 5px dashed green;
}
</style>
</head>
<body>
<h2>CSS border-block property</h2>
<p id="block">
This example shows the border-block property
defining all values at once.
</p>
</body>
</html>
Setting Border Block with Writing Mode
The writing-mode in the context of border-block influences the direction of the border. By default, the border appears horizontally, however by changing the writing mode, the border”s direction can be changed
- Horizontal-tb: border appears horizontally.
- Vertical-lb: border appears vertically.
These are shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal {
inline-size: 200px;
padding: 10px;
writing-mode: horizontal-tb;
border-block: 5px dashed red;
}
#vertical {
inline-size: 200px;
padding: 10px;
writing-mode: vertical-rl;
border-block: 5px dashed green;
}
</style>
</head>
<body>
<h2>CSS border-block property</h2>
<div>
<p id="horizontal">This example shows the
horizontal boder.</p>
</div>
<div>
<p id="vertical"> This example shows the
vertical border.</p>
</div>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-block | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
”;