CSS border-block-start-width Property

The CSS border-block-start-width property specifies the width of an element's border at the start of the block direction. In horizontal writing modes, it typically corresponds to the top border.

Sets the width of the border at the start edge of the block direction.
Adapts automatically to different writing modes and text directions.
Helps create consistent and flexible layouts for multilingual content.

Syntax:

border-block-start-width: medium | thin | thick | length | initial | inherit | unset;

Property values:

border-width: This property holds the width of the border.

Examples of border-block-start-width Property

Below examples illustrate the border-block-start-width property in the CSS:

Example 1: The border-block-start-width property sets the width of the border at the start of the block direction to 6px, creating a thicker top border around the purple box.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>CSS | border-block-start-width Property</title>
<!--Driver Code Ends-->

    <style>
        body {
            background-color: #dcdcdc;
            font-family: "Times New Roman", serif;
            margin: 0;
            padding: 10px;
        }

        h1 {
            color: green;
            text-align: left;
            font-size: 42px;
            margin: 0;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 20px;
            margin: 0 0 35px 5px;
        }

        .box {
            width: 220px;
            padding: 10px 0;
            text-align: center;
            background-color: purple;
            color: black;

            border-style: solid;
            border-color: gray;
            border-block-start-width: 6px;
            border-right-width: 6px;
            border-bottom-width: 6px;
            border-left-width: 6px;

            margin-left: 70px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS | border-block-start-width Property</h2>

    <div class="box">
        A Computer Science Portal
    </div>
</body>

</html>
<!--Driver Code Ends-->

Example 2: The border-block-start-width property sets the width of the top (block-start) border of the purple box to 3px, making it thicker and clearly visible.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>CSS | border-block-start-width Property</title>
<!--Driver Code Ends-->

    <style>
        body {
            background-color: #dcdcdc;
            font-family: "Times New Roman", serif;
        }

        h1 {
            color: green;
            text-align: left;
            font-size: 32px;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 18px;
            margin-left: 10px;
            margin-bottom: 25px;
        }

        .box {
            width: 220px;
            background-color: purple;
            color: black;
            text-align: center;
            padding: 8px 0;

            border-style: solid;
            border-color: black;
            border-block-start-width: 3px;
            border-right-width: 3px;
            border-bottom-width: 3px;
            border-left-width: 3px;

            margin-left: 72px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS | border-block-start-width Property</h2>

    <div class="box">
        A Computer Science Portal
    </div>

</body>

</html>
<!--Driver Code Ends-->

CSS border-block-start-width Property

Examples of border-block-start-width Property

Explore