CSS - border-block-start-color Property

CSS border-block-start-color property determines the logical block-start border color and is converted into a physical border color depending on the writing mode, directionality, and text orientation of the element.

Syntax

border-block-start-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 Start Color Property

The following examples explain the border-block-start-color property with different values.

Defining Color Name to Border Block Start Color

The color of the border-block-start can be set using color names. In the following example, orange color has been used to set the block-border-start-color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #named-color {
            border: 7px solid black;
            border-block-start-color: orange;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-start-color property
        </h2>
        <p id="named-color">
            This is a bordered element with 
            a specific border-block-start-color with named color.
        </p>
    </div>
</body>

</html>

Defining Hexadecimal Border Block Start Color Value

The color of the border-block-start can be set using hexadecimal values too. In the following example, hex value #ccff66 has been used to set the block-border-color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #hexa {
            border: 7px solid black;
            border-block-start-color: #ccff66;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-start-color property
        </h2>
        <p id="hexa">
            This is a bordered element with 
            a specific border-block-start-color using hex value.
        </p>
    </div>
</body>

</html>

Defining RGB Border Block Start Color Value

The color of the border-block-start can be set using rgb values too. In the following example, rgb value (255, 153, 102) has been used to set the block-border-start-color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #rgb {
            border: 7px solid black;
            border-block-start-color: rgb(255, 153, 102);
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-start-color property
        </h2>
        <p id="rgb">
            This is a bordered element with 
            a specific border-block-start-color using rgb value.
        </p>
    </div>
</body>

</html>

Defining HSL Border Block Start Color Value

The color of the border-block-start can be set using hsl values too. In the following example, hsl value (270, 100%, 40%) has been used to set the block-border-color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #hsl {
            border: 7px solid black;
            border-block-start-color: hsl(270, 100%, 40%);
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-start-color property
        </h2>
        <p id="hsl">
            This is a bordered element with 
            a specific border-block-start-color using hsl value.
        </p>
    </div>
</body>

</html>

Defining Transparent Border Block Start Color Value

To set a transparent border-block-start color, we use the transparent value. In the following example, transparent value has been used to set the block-border-start-color. The top border is not visible.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #transparent {
            border: 7px solid black;
            border-block-start-color: transparent;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-start-color property
        </h2>
        <p id="transparent">
            This is a bordered element with 
            a specific border-block-start-color 
            using transparent value.
        </p>
    </div>
</body>

</html>

Defining Border Block Start Color with Writing Mode

The border-block-start-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-start-color: red;
            padding: 20px;
        }

        #vertical {
            border: 7px solid black;
            writing-mode: vertical-rl;
            border-block-start-color: red;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-start-color property
        </h2>
        <p id="horizontal">
            This shows the horizontal coloring of the 
            border-block-start-color property.
        </p>
        <p id="vertical">
            This shows the vertical 
            coloring of the border-block-start-color property.
        </p>
    </div>
</body>

</html>

Supported Browsers

Property
border-block-start-color	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page