CSS - border-block-end Property

CSS border-block-end property is a shorthand property that provides an easy way to set the values of all logical block-end border properties such as border-block-end-width, border-block-end-style, and border-block-end-color in a single stylesheet. The property is affected by the writing mode.

Syntax

border-block-end: border-block-end-width border-block-end-style border-block-end-color|initial|inherit;

Property Values

Value	Description
border-block-end-width	It specifies the width of an element's border at the end in the block direction. Default value is medium.
border-block-end-style	It specifies the style of an element's border at the end in the block direction. Default value is none.
border-block-end-color	It specifies the color of an element's border at the end in the block direction. Default value is the current color of border.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Block End Property

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

Setting Border Block End

To set all the values of border-block-end-width, border-block-end-style and border-block-end-color at once, we use the border-block-end property. All the values will be defined in one declaration. In the following example, 10px width, double style and blue color has been used.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        #color {
            border: 1px solid black;
            width: 300px;
            padding: 60px;
            border-block-end: 10px double blue;
        }
    </style>
</head>

<body>

    <h2>
        CSS border-block-end Property
    </h2>

    <p id="color">
        This shows the border block end  property 
        where all values have been set at once. Width-10px,
        style-double,color-blue
    </p>
</body>

</html>

Replacement Properties of Border Block End

The border-block-end property is a combination of border-block-end-width, border-block-end-style and border-block-end-color. The following example, shows how these individual properties work together to show the border-block-end effect.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10%;
            border-block-end-width: 5px;
            border-block-end-style: solid;
            border-block-end-color: blue;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-block-end Property
    </h2>
    <p class="box">
        This is how border-block-end property 
        works. It is a combination of border-block-end-width,
        border-block-end-style and border-block-end-color.
    </p>
</body>

</html>

</html>

Setting the Border Block End on Writing Mode

The border-block-end property is affected by the writing mode, which determines the direction of the border. Horizontal mode affects top and bottom borders while vertical mode affects left and right borders. These are shown in the following example.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        #horizontal {
            border: 1px solid black;
            width: 300px;
            padding: 40px;
            writing-mode: horizontal-tb;
            border-block-end: 6px solid black;

        }

        #vertical {
            border: 1px solid black;
            height: 500px;
            padding: 40px;
            writing-mode: vertical-lr;
            border-block-end: 6px solid black;

        }
    </style>
</head>

<body>
    <h2>
        CSS border-block-end Property
    </h2>
    <p id="horizontal">
        This shows the border block end with horizontal 
        writing mode.
    </p>
    <p id="vertical">
        This shows the border block end with 
        vertical writing mode.
    </p>
</body>

</html>

Supported Browsers

Property
border-block-end	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page