CSS - border-block-end-color Property

Quiz

CSS border-block-end-color property determines the logical block-end 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-end-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 End Color Property

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

Border Block End Color by Color Name

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Border Block End Color by HEX Value

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Border Block End Color by RGB Value

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

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #rgb {
            border: 7px solid black;
            border-block-end-color:rgb(204, 204, 0);
            padding: 15px;
        }
    </style>
</head>

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

</html>

Border Block End Color by HSL Value

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Transparent Border Block End 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-end-color:transparent;
            padding: 15px;
        }
    </style>
</head>

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

</html>

Border Block End 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-end-color: blue;
            padding: 20px;
        }

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

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

</html>

Supported Browsers

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

css_reference.htm

Print Page