CSS - border-block-color Property
CSS border-block-color property is used for specifying the color of the logical block borders for an element. The property is applied on the physical borders based on the writing mode, directionality and text orientation.
Syntax
border-block-color: color | transparent | initial | inherit;
Property Values
| Value | Description |
|---|---|
| color | It specifies the color of border. Different color formats can be used (names,rgb values,hex values,hsl values etc.). Default color is the current color of the element. |
| transparent | It specifies that the border must be transparent. | initial | This sets the property to its default value. |
| inherit | This inherits the property from the parent element. |
Examples of CSS Border Block Color Property
The following examples explain the border-block-color property with different values.
Border Block Color by Color Name
The color of the border-block can be set using color names. In the following example, red color has been used to set the block-border-color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#named-color {
border: 7px solid black;
border-block-color: red;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="named-color">
This is a bordered element with
a specific border-block-color with
color name.
</p>
</div>
</body>
</html>
Border Block Color by Hex Value
The color of the border-block can be set using hexadecimal values too. In the following example, hex value #9999ff has been used to set the block-border-color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#hexa {
border: 7px solid black;
border-block-color: #9999ff;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>CSS border-block-color property</h2>
<p id="hexa">
This is a bordered element with
a specific border-block-color using
hex value.
</p>
</div>
</body>
</html>
Border Block Color by RGB Value
The color of the border-block can be set using rgb values too. In the following example, rgb value (204,102,255) has been used to set the block-border-color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#rgb {
border: 7px solid black;
border-block-color:rgb(204, 102, 255);
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="rgb">
This is a bordered element with
a specific border-block-color using
rgb value.
</p>
</div>
</body>
</html>
Border Block Color by HSL Value
The color of the border-block can be set using hsl values too. In the following example, hsl value (40, 100%, 70%) has been used to set the block-border-color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#hsl {
border: 7px solid black;
border-block-color:hsl(40, 100%, 70%);
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="hsl">
This is a bordered element with
a specific border-block-color using
hsl value.
</p>
</div>
</body>
</html>
Transparent Border Block Color
To set a transparent border block color, we use the transparent value. In the following example, transparent value has been used to set the block-border-color. The top and bottom borders are not visible.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#hsl {
border: 7px solid black;
border-block-color:transparent;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="hsl">
This is a bordered element with
a specific border-block-color using
transparent value.
</p>
</div>
</body>
</html>
Different Border Colors with Border Block Color
To set different border block colors, we can specify two different colors to the border-block-color property. First color is applied to first border and second color is applied to second border. In the following example, orange and brown colors are used with the border-block-color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#hsl {
border: 7px solid black;
border-block-color: orange brown;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="hsl">
This is a bordered element with
a specific border-block-color using
different color values.
</p>
</div>
</body>
</html>
Border Block Color with Write Mode
The border-block-color property is influenced by the writing mode, which determines the border direction. In horizontal mode, it colors the top and bottom borders, while in vertical mode, it colors the left and right borders, as shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal {
border: 7px solid black;
writing-mode: horizontal-tb;
border-block-color: blue purple;
padding: 20px;
}
#vertical {
border: 7px solid black;
writing-mode: vertical-rl;
border-block-color: blue purple;
padding: 20px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="horizontal">
This shows the horizontal coloring of
the border-block-color property.
</p>
<p id="vertical">
This shows the vertical coloring of
the border-block-color property.
</p>
</div>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-block-color | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |