CSS border-block-end Property

The CSS border-block-end property is a shorthand property that sets the width, style, and color of an element's border at the end of the block direction.

Sets the block-end border's width, style, and color in a single declaration.
Adapts automatically to different writing modes.
Simplifies border styling by combining multiple properties into one.

Syntax:

border-block-end: width style color;

Property values

border-width: Specifies the width of the block-end border.
border-style: Specifies the style of the block-end border, such as solid, dashed, or dotted.
border-color: Specifies the color of the block-end border.

Example of border-block-end Property

Below examples illustrate the border-block-end property in the CSS:

Example 1: The border-block-end property applies a 5px solid yellow border to the block-end edge (bottom border in horizontal writing mode) of the purple box.

html

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

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

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

        h1 {
            color: green;
            font-size: 34px;
            margin: 10px 0;
            text-align: left;
        }

        h2 {
            font-size: 20px;
            margin-bottom: 25px;
        }

        .box {
            width: 220px;
            background-color: purple;
            color: black;
            text-align: center;
            font-size: 18px;
            padding: 8px 0 18px 0;
            margin-left: 35px;

            border-block-end: 5px solid yellow;
        }
    </style>

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

<body>
    <h1>GeeksforGeeks</h1>

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

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

</body>

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

Example 2: The border-block-end property applies a 4px dashed yellow border to the block-end edge (bottom border in horizontal writing mode) of the purple box.

html

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

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

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

        h1 {
            color: green;
            font-size: 34px;
            margin: 10px 0;
        }

        h2 {
            font-size: 20px;
            margin-bottom: 25px;
        }

        .box {
            width: 220px;
            background-color: purple;
            color: black;
            text-align: center;
            font-size: 18px;
            padding: 8px 0 15px 0;
            margin-left: 35px;

            border-block-end: 4px dashed yellow;
        }
    </style>

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

<body>
    <h1>GeeksforGeeks</h1>

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

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

</body>

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

CSS border-block-end Property

Property values

Example of border-block-end Property

Explore