CSS - border-block-start Property

Quiz

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

Syntax

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

Property Values

Value	Description
border-block-start-width	It specifies the width of an element's border at the start in the block direction. Default value is medium.
border-block-start-style	It specifies the style of an element's border at the start in the block direction. Default value is none.
border-block-start-color	It specifies the color of an element's border at the start 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 Start Property

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

Setting All Border Block Start Property Values

To set the values of border-block-start-width, border-block-start-style and border-block-start-color in one single declaration, we use the border-block-start property. In the following example, 4px width, dashed style and blue color have been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #color {
            border: 1px solid black;
            width: 300px;
            padding: 60px;
            border-block-start: 4px dashed blue;
        }
    </style>
</head>

<body>

    <h2>
        The border-block-start Property
    </h2>
    <p id="color">
        This shows the border block start  property 
        where all values have been set at once. Width-4px,
        style-dashed,color-blue
    </p>
</body>

</html>

Components of Border Block Start Property

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

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10%;
            border-block-start-width: 6px;
            border-block-start-style: double;
            border-block-start-color: red;
        }
    </style>
</head>

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

</html>

</html>

Setting Border Block Start Property with Writing Mode

The border-block-start 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-start: 7px solid orange;

        }

        #vertical {
            border: 1px solid black;
            height: 500px;
            padding: 40px;
            writing-mode: vertical-rl;
            border-block-start: 8px solid orange;

        }
    </style>
</head>

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

</html>

Supported Browsers

Property
border-block-start	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page