CSS - border-block-color Property

Quiz

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

css_reference.htm

Print Page